vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@39297 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David A. Kennedy 2016-11-18 20:10:18 +00:00
parent ba5a196d9e
commit 05b394ccaa
2 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/wp-content/themes/twentyseventeen/assets/js/global.js
View File

@ -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.

12
src/wp-content/themes/twentyseventeen/style.css
View File

@ -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,