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?
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);
});