From aaf3fe71dd1c648b9dbdec0249b715c47eddbf75 Mon Sep 17 00:00:00 2001
From: "David A. Kennedy" <me@davidakennedy.com>
Date: Fri, 18 Nov 2016 20:11:30 +0000
Subject: [PATCH] Twenty Seventeen: Adds `background-attachment: fixed;` to
 devices that should support it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.

Built from https://develop.svn.wordpress.org/trunk@39297


git-svn-id: http://core.svn.wordpress.org/trunk@39237 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../twentyseventeen/assets/js/global.js       | 32 +++++++++++++++++++
 wp-content/themes/twentyseventeen/style.css   | 12 +++----
 wp-includes/version.php                       |  2 +-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/wp-content/themes/twentyseventeen/assets/js/global.js b/wp-content/themes/twentyseventeen/assets/js/global.js
index fa29a19b79..cb8a6ec92f 100644
--- a/wp-content/themes/twentyseventeen/assets/js/global.js
+++ b/wp-content/themes/twentyseventeen/assets/js/global.js
@@ -148,6 +148,34 @@
 		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,6 +212,10 @@
 		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.
diff --git a/wp-content/themes/twentyseventeen/style.css b/wp-content/themes/twentyseventeen/style.css
index a109c28f91..70913119b8 100644
--- a/wp-content/themes/twentyseventeen/style.css
+++ b/wp-content/themes/twentyseventeen/style.css
@@ -3603,6 +3603,11 @@ object {
 		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,13 +3998,6 @@ object {
 	}
 }
 
-@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,
diff --git a/wp-includes/version.php b/wp-includes/version.php
index ea82272c88..160aba2845 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta4-39296';
+$wp_version = '4.7-beta4-39297';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.