on Chrome, transformed img is flickering if an element has background half-cover it
I'm building a 3d gallery, everything works fine until the sticky menu bar appears. The images under the menu bar is flickering only on Chrome. Here's a video:
16 Replies
adding -webkit-backface-visibility is not working, and I don't think it's relevant to this issue
Could be a lot of things, maybe just a rendering issue for chrome (transforms can be heavy). To be able for us to help, we'll need to see some code, preferably in a working codepen/sandbox. (only the relevant part please)
https://codepen.io/c-Trung-Ng-/pen/VwRyLPj
here's a minimal reproduce I made
not exactly sure why it was flashing, but based on your example, i made it how i would do it.
https://codepen.io/MarkBoots/pen/QWoabzz?editors=1100
i did create a separate wrapper to only control the rotation. so not on the scene itself
wow
you're awesome
so adding a little opacity fixes it?
no its not about the opacity. i only did it to see what was happening
if I remove the opacity value, it still flicker somewhere
hm 🤔 not happening at my side
yea, i notice it now too. when i increase the number of slides, it does happen to me as well
then very much ignore what I said, that's not a rabbit hole you want to go down
I set the opacity to 0.999999 and it works amazing
you were totally right. i do remember reading something about the used graphics card in combination with transforms and stuff
I'm using mac pro m2, my friend on mac air m1 get the same problem
btw, i updated the pen to hold multiple rows
thank you guys for helping
this also worth to take into consider sometime
thank you