search

ressio / lazy-load-xt

Lazy load XT is a jQuery plugin for images, videos and other media
http://ress.io/lazy-load-xt-jquery/
MIT License
1.36k stars 245 forks source link

No continuous scroll event for Chrome on iOS #38

Open faebe opened 9 years ago

faebe commented 9 years ago

Chrome for iOS uses UIWebView instead of WKWebView and therefore has no continous scrolling: http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

This results in lazy-load-xt only loading the content at the end of a scroll event. Any way this can be fixed?

faebe commented 9 years ago

Temporary fix: Use skrollr.js

I included scrollr.js (originally intended for parallax scrolling), gave the main container id="skrollr-body"and started skrollr when Chrome for iOS is detected:

if(navigator.userAgent.match('CriOS')){ var s = skrollr.init(); }

Skroller replaces the native scroll with an content offset. Not perfect but a temporary fix. If anyone can extract only the scroll replacement from skrollr, this would be a little bit faster....

faebe commented 9 years ago

UPDATE: NEW FIX – ISCROLL.JS

You can use iscroll.js 5 (http://cubiq.org/iscroll-5) to fix loading for all mobile browsers not supporting continous scroll events (in the following example only Chrome iOS [CriOS]).

STEP 1: Include jquery and iscroll in your HTML head

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/iscroll.js"></script>

STEP 2: Put your page inside a wrapper div with id="page" (used in JS in Step 4) You can NOT use a div with the id "wrapper", because the wrapper id is used by iscroll and added later on via jquery (Step 4)

<body>
    <div id="page">
        <!-- Your content -->
    </div>
</body>

STEP 3: Add this to your CSS

#wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller {
    position: absolute;

    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

STEP 4: Use this script at the end of your body element You can add more userAgents...

// Fix Chrome iOS
if(navigator.userAgent.match('CriOS')){
    // Wrap content in iScroll elements
    $( '#page' ).wrap( '<div id="wrapper"><div id="scroller"></div></div>' );

    // Start iScroll
    myScroll = new IScroll('#wrapper', {
        click: true
    });

    // Prevent default scroll
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);        
}