Ticket #38395: 38395.5.patch

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

@@ -148 +148 @@
                 return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
         }
 
+        /**
+         * 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() {
 
@@ -184 +212 @@
                 if ( true === supportsInlineSVG() ) {
                         document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
                 }
+
+                if ( true === supportsFixedBackground() ) {
+                        document.documentElement.className += ' background-fixed';
+                }
         });
 
         // If navigation menu is present on page, adjust it on scroll and screen resize.

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

@@ -3603 +3603 @@
                 max-height: 1200px;
         }
 
+        /* 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;
                 width: 36%;
@@ -3993 +3998 @@
         }
 }
 
-@media screen and ( min-width: 85.45em ) {
-
-        .panel-image {
-                background-attachment: fixed;
-        }
-}
-
 @media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {
 
         .admin-bar .site-navigation-fixed.navigation-top,