X (formerly Twitter) ·
It works fine in troubleshooting mode which leads me to believe the problem originates from hardware acceleration, javascript JIT, or something else troubleshooting disables... Just disabling hardware acceleration still crashes Firefox, but doesn't crash anything else!
Turns out all my assumptions about the issue were wrong... TLDR: avoid very large values of CSS `border-radius`
So essentially what happened is that I made a bunch of concentric circles However since this was a quick experiment I made each circle a <div> instead of using SVG or canvas. So I had a for loop that generated 300 separate divs:
With a separation of 50px between each div, the largest was about 30,000px by 30,000px. That's big, but there's no problem yet... The problem came when I added `border-radius: 50%`...
Chrome handles this fine—maybe it doesn't even try to render the circles bigger than the screen—but Firefox... 💥 Not sure how the rendering engine works but I imagine this is essentially creating hundreds of canvases in the background, each thousands of pixels large
Without hardware acceleration enabled this takes ~50 seconds to use up all 16gb of RAM on my computer With hardware acceleration it takes ~4 seconds, and soon after causes a full freeze-up and starts crashing other programs
And voilà ✨ that's how I made a website that works fine in chrome but brings my computer to a complete standstill when opened in firefox Here's the code if you want to try it for yourself: