Changeset 39297

Timestamp:

11/18/2016 08:10:18 PM (7 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Adds background-attachment: fixed; to devices that should support it

iOS disables this feature under the hood, but it also distorts the images – unlike other mobile devices that don't support it. So this adds a check for both background-attachment: fixed support or whether it’s an iOS device - passing it adds the class background-fixed which is used to add the proper styles.

It also lowers the media query so the parallax-like style is present on a wider range of screens since this bug can be better targeted and avoided. In this way, screens that aren't the offending devices aren't punished merely based on screen size.

Props joemcgill, laurelfulford, helen.

Fixes #38395.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/js/global.js (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentyseventeen/assets/js/global.js

@@ -149 +149 @@
     }
 
+    /**
+     * Test if an iOS device.
+    */
+    function checkiOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream;
+    }
+
+    /*
+     * Test if background-attachment: fixed is supported.
+     * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
+     */
+    function supportsFixedBackground() {
+        var el = document.createElement('div'),
+            isSupported;
+
+        try {
+            if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) {
+                return false;
+            }
+            el.style.backgroundAttachment = 'fixed';
+            isSupported = ( 'fixed' === el.style.backgroundAttachment );
+            return isSupported;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+
     // Fire on document ready.
     $( document ).ready( function() {
@@ -185 +213 @@
             document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
         }
+
+        if ( true === supportsFixedBackground() ) {
+            document.documentElement.className += ' background-fixed';
+        }
     });
 

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

@@ -3604 +3604 @@
     }
 
+    /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
+    .background-fixed .panel-image {
+        background-attachment: fixed;
+    }
+
     .page-two-column .panel-content .entry-header {
         float: left;
@@ -3991 +3996 @@
     .twentyseventeen-front-page .entry-content blockquote.alignright {
         margin-right: -20%;
-    }
-}
-
-@media screen and ( min-width: 85.45em ) {
-
-    .panel-image {
-        background-attachment: fixed;
     }
 }