search

locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.56k stars 1.11k forks source link

text-shadow ruins chrome parallax scroll frame-rate #433

Open BlakeGiunta opened 2 years ago

BlakeGiunta commented 2 years ago

Hi, this is actually my first ever "issue" comment/report. Apologies if my ignorance shines through.

The Bug In a nutshell, I noticed horrible parallax performance in Chrome, and finally narrowed it down to the text-shadow property. If I delete it, performance is entirely restored. I'm not sure this is exactly a bug with LocomotiveScroll; it may just be an issue with Chrome?

To Reproduce Presumably you can just create two elements of parallaxing text and add text-shadow to it to see it for yourself. I had text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px #ffffff;
UPDATE: Mysteriously, however, Chrome works fine with a different text-shadow, namely: 1px 1px 10px #fff, 1px 1px 10px #ccc;

Desktop

esterfrontend commented 2 years ago

Hi. Do some elements disappear when scrolling up and down? If it's your problem you can solve it adding those lines to CSS:

.has-scroll-smooth [data-scroll-container] {
    transform: perspective(1px);
}