Post

Many such cases; especially with Safari, these days.

Only happens when deployed, works perfectly locally. That plus the waits fixing means there’s a race somewhere I just dunno where.

Well, technically you never explicitly apologized so you're kind of in the clear "That's my secret. I'm never sorry"

Code is here: github.com/samwho/visua...

createSVG() is synchronous.

There's a reason universities are renaming their Computer Studies degrees as Bachelor of Googling StackOverflow. Sometimes, the only answer is someone else's unanswered question.

Trial and error.

I know it's generally "bad", but rather than this kind of hopeful timing hacks, generally it's a lot more stable to force a sync reflow (e.g. just getting document.body.offsetWidth would do). Still mostly a hack, but at least it doesn't rely on some magic timing and doesn't take 3 frames.

you should never hate yourself because of browsers.

It might do, testing this was highly frustrating because I couldn’t reproduce it locally. So I gave it a lot of wiggle room to reduce the amount of times I have to wait for GitHub pages to deploy my site.

🫣

better slap a nsfw tag next time bro

`z-index` and `scale()` ensure the cursor is hovering over the image (as long as it is within the browser viewport), and `top` change ensures reflow to cause the mouse move event to fire. If you remove anything from this code, it fails to fix the bug.

Looks good to me. Ship it!

I think we've all been there at some point.

The animations consistently didn’t play for me, but only on Firefox and only after the site been deployed. I couldn’t reproduce it locally, despite the code being identical. Leads me to believe it’s a timing problem, though I never did try network slowness emulation in the dev tools 🤔

We used the same trick on the chess.com chessboard to force code into the next frame.