Three.js freezes CSS animated background images and transitions

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.

To Reproduce

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

Expected behavior

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)

Platform:

  • 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

2 thoughts on “Three.js freezes CSS animated background images and transitions

  1. three.js, like any WebGL library, must do some tasks synchronously. Synchronous JavaScript execution will block some other functionality, like event handlers, but should not block CSS transitions on modern browsers. If JavaScript or WebGL execution is capable of blocking CSS transitions at all, that seems like a problem for the browser vendor to resolve. The fact that other WebGL libraries, making different calls to JS and WebGL APIs, do not trigger the bug would indicate that only certain functions or APIs trigger the bug, and not that three.js is necessarily in the wrong.

    Firefox Developer Edition also has some experimental features enabled, which may be affecting things — the example seems to work normally for me in the latest stable version of Firefox.