Ticket #38395: 38395.4.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

@@ -4006 +4006 @@
         }
 }
 
-@media screen and ( min-width: 85.45em ) {
-
-        .panel-image {
+@media screen and ( min-width: 55em ) {
+        .background-fixed .panel-image {
                 background-attachment: fixed;
         }
 }