Issue with Infinite Scroll Not Working on Safari/Apple Devices
Hi,
I'm experiencing an issue with my infinite scroll it works perfectly on all browsers except Safari or Apple devices.On these devices, when reaching the end of the infinite scroll, a reload occurs, which does not happen on other browsers. I'm not sure what exactly is causing the problem, and I haven't been able to find a fix.
Do you have any suggestions on how to resolve this issue? Any help would be greatly appreciated!
Thanks in advance!
https://codepen.io/Redcaus12345/pen/GgKVadx
11 Replies
But it is only on safari
Or Apple and I still dont now How to fix it
Try adding
transform: translateZ(0); to the images
On a side note, I notice that you are using JS to pause the animation on hover. You can also do this just with CSS
Thank you I will try it out
But what causes this reload ?
I hope your suggestion fix it
Is it wm actual reload where your browser window refreshes or is it a flash because the end amd the beginning isn't perfectly lined up ?
sorry, I think that should have been
-webkit-transform: translateZ(0); though in my test on your codepen it did work without the prefix
It really is nothing more than the browser moving the container (with the images) back to its starting position. Safari struggles a little bit with this when images are involved, that is why the translateZ() trick should resolve the issue as it applies hardware acceleration on the images (not sure of the correct technical reason behind this)I think the second
I doesn’t reload the whole page
The just this little ”flash“
Ah gotcha, good catch . Yep I've heard about the translate3d being the trick to supercharge the CPU for animations.
Sounds like Chris has identified that it's moving it back to the original starting position so it's not lining up. Chris knows his stuff, would take his advice
I will try it out later and tell you guys if it’s worked
the classic
translateZ
also, add will-change: transform