I made a small one pager which uses framer for scroll animations. I wanted to add a small smoke effect when scrolling past over a certain section.
The overall effect seems to function but it wrecks the whole sites performance on chrome.
It runs smooth on Firefox so it almost seems as if chrome doesn't use hardware acceleration.
Here is the scrolling animation on chrome
and on firefox
Please see this page on Firefox vs Chrome:
https://ghettogoethe-git-feat-smoke-c5h8nnao4s-projects.vercel.app?_vercel_share=1mwhvH8awz6k9zTbbQ1FWuNAwWjZ0Dw3
My Chrome GPU settings say the following
Sometimes it runs smooth on Chrome, but 95% it lags and glitches and is almost unusable.
Fix:Setting the ANGLE graphics backend to D3D11on12 fixes the issue.
How can I make sure this runs smoothly on all Chrome browsers regardless of this setting?