34

Fuck Firefox's CSS engine! Why is it so fucking buggy?

I needed to position some elements in a circle, so I used Math.cos(Math.PI / 2) to calculate their x positions. So, mathematically speaking, that should return 0, right? Turns out in JS it doesn't (because fuck precision). It actually returns 6.123233995736766e-17 and I was using that in the style, like top: offset + that.

In chrome it was working perfectly, but in Firefox all hell broke loose. All animations stopped working, scripts stopped working, demons were eating people alive.

And I lost hours hunting that down. My fault because I should have tested it immediately on other browsers, but fuck!

Comments
  • 4
    Hardcode some values?
    How about pure css ?
    Rotate and translate without js?
    An svg? You can also animate that
  • 2
    It didnt round the result, its e^-17 which is almost zero.
  • 3
    @nbamaral yeah, I could have done the math myself and use the results directly on CSS, but I wanted it to be dynamic, so I wouldn't have much trouble if the client came back and said something like "can you add another element?"
  • 2
    @JFK422 yeah, I fixed it by rounding it.
  • 1
    Did you file a bug report? Firefox is open source. Also, was it on Quantum or on the current engine?
  • 2
    @brainlessdev not yet, but I will in the weekend.

    I'm not sure, I'll have to check.
  • 1
    Oh, and the animations that stopped working were completely unrelated to these elements.
  • 1
    @shellbug Try downloading Firefox nightly or Developer Edition and see if it also happens there. Chances are it won't, the CSS engine was built anew.
  • 1
    @brainlessdev cool! But normal users won't use that, tho.
  • 1
    The nightly build should be on the main branch soon so they'll get it eventually. Most people have their browsers on auto-update.
  • 1
    @shellbug
    Did a few interactive thingies with pure css, and they worked great in all browsers, the advantage being working with plain ints for rotation.
    It takes some work understanding what's the rotation point though.
    More complex diagrams I go svg all the way, it's easy to script them too (generate there dynamically) or animate parts of it.
    Best of luck 😊
Add Comment