WordPress.org

Make WordPress Core

Changeset 39297


Ignore:
Timestamp:
11/18/16 20:10:18 (9 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/js/global.js

    r39225 r39297  
    149149    } 
    150150 
     151    /** 
     152     * Test if an iOS device. 
     153    */ 
     154    function checkiOS() { 
     155        return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream; 
     156    } 
     157 
     158    /* 
     159     * Test if background-attachment: fixed is supported. 
     160     * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed 
     161     */ 
     162    function supportsFixedBackground() { 
     163        var el = document.createElement('div'), 
     164            isSupported; 
     165 
     166        try { 
     167            if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) { 
     168                return false; 
     169            } 
     170            el.style.backgroundAttachment = 'fixed'; 
     171            isSupported = ( 'fixed' === el.style.backgroundAttachment ); 
     172            return isSupported; 
     173        } 
     174        catch (e) { 
     175            return false; 
     176        } 
     177    } 
     178 
    151179    // Fire on document ready. 
    152180    $( document ).ready( function() { 
     
    185213            document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' ); 
    186214        } 
     215 
     216        if ( true === supportsFixedBackground() ) { 
     217            document.documentElement.className += ' background-fixed'; 
     218        } 
    187219    }); 
    188220 
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39285 r39297  
    36043604    } 
    36053605 
     3606    /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */ 
     3607    .background-fixed .panel-image { 
     3608        background-attachment: fixed; 
     3609    } 
     3610 
    36063611    .page-two-column .panel-content .entry-header { 
    36073612        float: left; 
     
    39913996    .twentyseventeen-front-page .entry-content blockquote.alignright { 
    39923997        margin-right: -20%; 
    3993     } 
    3994 } 
    3995  
    3996 @media screen and ( min-width: 85.45em ) { 
    3997  
    3998     .panel-image { 
    3999         background-attachment: fixed; 
    40003998    } 
    40013999} 
Note: See TracChangeset for help on using the changeset viewer.