Changeset 39176

Timestamp:

11/09/2016 01:11:59 AM (8 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Fix badly pixelated images on iOS devices

The CSS property background-attachment: fixed is disabled in some mobile browsers for performance reasons. So here, the fix increases the breakpoint where the background-attachment: fixed is applied to the front page images. Doing this removes the fixed backgrounds and the issue from all smaller screens, but the downside is that it also removes the fixed backgrounds from smaller laptops. It's also possible future devices could fall into this breakpoint, but this seems to be the most practical solution.

Props laurelfulford.

Fixes #38395.

File:

• trunk/src/wp-content/themes/twentyseventeen/style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -3910 +3910 @@
 }
 
-@media screen and ( min-width: 55em ) {
-
-    .panel-image {
-        background-attachment: fixed;
-    }
-}
-
 @media screen and ( min-width: 67em ) {
 
@@ -3978 +3971 @@
     .twentyseventeen-front-page .entry-content blockquote.alignright {
         margin-right: -20%;
+    }
+}
+
+@media screen and ( min-width: 85.45em ) {
+
+    .panel-image {
+        background-attachment: fixed;
     }
 }