CODEWITHSUNDEEP
cssiosscroll
Monica Busatta
Monica Busatta

Reputation: 21

Scrolling issue on IOS

I'm having a scrolling issue with IOS Safari. The site has a fixed top and bottom, a lot of images, including on pseudo-elements (before/after) as backgrounds, and some relative position and negative margin.

On android it works perfectly, but on ios it get stuck sometimes. I can't scroll, the page bounces and after some attempts, the problem stops.

I also have an "overflow-x: hidden" on the body and html elements.

Does anyone know what may be causing this?

Upvotes: 2

Views: 1611

Answers (1)

Jeffrey Xuan
Jeffrey Xuan

Reputation: 41

iOS browsers (including Chrome and Safari) have a bug that the css pseudo elements could disappear after scrolling. There is a trick to fix : remove that pseudo css during scrolling, and put it back after the scrolling is finished.

example css, put "===" as a pseudo element to the class ".info" :

.info:not(.scrolling) {
content: "===";
}

example jQuery, add class "scrolling" to the class ".info" when it is scrolling, and remove the class when the scrolling is finished :

let isscrolling = null;

    $(".info").on("scroll",function (e) {
        if(isscrolling){
            clearTimeout(isscrolling);
        }
        $(".info").addClass("scrolling");
        isscrolling = setTimeout(function(){
            $(".info").removeClass("scrolling");
            isscrolling = null;
        },100);
    });

Upvotes: 0

Related Questions