jake lazaroff
any CSS experts here that know how to debug a 3D transformed element that randomly disappears and reappears as it rotates? this is a safari-specific bug (surprise!) but i really have no idea how to figure it out other than just trying different transform values and hoping it magically starts working
Oct 9, 2025 at 10:59pmWeb
Show threadspartanatreyuOct 10, 2025

@jakelazaroff Have you got a reduced code example to check out?

In my experience, if simply making the reduced example fixes the problem and not the fact that you removed specific lines, then it's probably Safari deciding to just stop drawing so it can keep up a fast refresh rate.

It favours being fast over being correct. (not a great issue to run into when it's removing half of your homepage >_<)

Show threadjake lazaroffOct 10, 2025

@spartanatreyu this is about as stripped down as i can make it https://codepen.io/jakelazaroff/pen/MYKojwO

the weird thing is the minimal example seems to work for me in the codepen preview, but if i open it in its own tab instead of an iframe it flickers!

y safari y

...

Show threadjake lazaroffOct 10, 2025

@spartanatreyu i kept playing around and found the magic combination. apparently safari doesn't like it when you mix perspective in one unit and transforms in another

or maybe it does and none of this makes sense, idk, but i'm not gonna look a gift horse in the mouth 🙈

Show threadspartanatreyuOct 10, 2025

@jakelazaroff Ah yeah, you beat me to my response.

The original example was working in the codepen iframe and in the debug page. The entire polygon is being drawn-in the whole time (although the polygon's postioning is a bit jittery near the hinge but that might just be the animation).

I played around with perspective because I remember having to play with that with my old css transform homepage but couldn't get it to break.

$20 says it's one of those devices specific things.

Show threadjake lazaroffOct 10, 2025

@spartanatreyu lovely, can't wait for the bug reports to trickle in from someone whose device it still doesn't work on 😅

thank you for your time and wisdom though! don't think i would have noticed the mismatched units without that minimal repro

Show threadspartanatreyuOct 10, 2025

@jakelazaroff Personally, I found transforms easiest on Safari with pixels and percentages, because Safari has always had issues with viewport units.

See if you can find a friend, coworker or family member with an old device to test on.

Since there's no actually way to detect the paint failures at runtime, if it's happening you might want to consider replacing the transformed elements with a canvas or video.

Show threadspartanatreyuOct 10, 2025

@jakelazaroff If you go the canvas route, you can get it rendering with a tiny bit of js so long as you treeshake the library (or you can do it by hand if you can handle the manual transforms).

If you go the video route and you're really careful about what's on the laptop and the encoding settings, you can get really small video sizes that still look good.

Show threadjake lazaroffOct 10, 2025

@spartanatreyu sigh was really hoping to do this sans JS but if i just can't figure out the bugs i might have to give in

the thing with the video is i have multiple layers that all animate differently… and i kind of like showing that it's actually 3D. kinda thumbing my nose at generic LLM designs lol

Show threadcopyandpaetowOct 10, 2025

@jakelazaroff When I played around with 3D transforms in Safari, it couldn't render perfect 90deg angles (180deg, 270deg, ...) so I always needed to include a very small decimal value => 90deg became 90.01deg.

Are your transforms issue appear with specific angles too?

Show threadjake lazaroffOct 10, 2025
@copyandpaetow oh interesting! i'm not positive but i *think* the issue in the video happened when it crossed an axis (i.e. it flickered from on to off at exactly 90deg or something). will try that if it happens again!