Describe the bug
Three.js (WebGL) freezes background animations (.gif in my case) and CSS transitions. Bascially when i don’t trigger any CSS transition, the background GIF seems to freeze… but when I do trigger CSS transition (literally any), everything seems to move/animate/transition like it should.
I’m running localhost dev server (https://github.com/h5bp/html5-boilerplate) with parcel, where i simpy load index.html file, with one CSS and one JS file.
I’m using Firefox Browser Developer edition 86.0b8 (64-bit) to view this project.
CSS contains Tailwind CSS and JS file contains Three.js (nothing fancy, really basic code).
Code & Live example & Video Screenshot
Code example and video screenshot available here: https://stackoverflow.com/questions/66144168/three-js-freezes-css-animated-background-images-and-transitions
No background gif animation or transition freezing should happen. I’ve tested on Chrome, Edge, Safari and Opera (all latest) and this issue happens only on Firefox Browser Developer edition 86.0b8 (64-bit)
- Device: Desktop
- OS: Windows 10 (latest updates)
- Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0 (Firefox Developer latest)
- Three.js version: 0.125.2
P.S. I’ve also submited this to Bugzilla, just in case it’s a browser support issue. https://bugzilla.mozilla.org/show_bug.cgi?id=1692194