CSS-Transforms and viewport scrolling in Safari causes distorted elements

[metafizzy]

CSS-Transforms and viewport scrolling in Safari causes distorted elements

[desandro]

Thanks for the head's up. Personally I'm unable to reproduce this. I just updated Safari so maybe this has been resolved with the latest release.

This sounds like a fairly disruptive Safari bug so I'll keep an eye out for it moving forward. Triggering CSS 3D transforms have plenty of unwanted side effects.

[fk]

Thanks for the quick response David!

My version of Safari is also the latest available via "Software Update" – I updated yesterday hoping this would fix this weird bug. But of course I'm way behind regarding the OS itself (10.5.8) – maybe it's a 10.5-specific library or something along those lines. I'll let my colleagues test on 10.6 and report back.

Your answer just reminded me of my WebKit Nightly Build – I just updated that to the latest, r84622 (5.0.5 (5533.21.1)), and sadly can reproduce the described behaviour. Another quirk I ran into with the Nightly is that when I cmd-clicked the link to the isotope-demo to load it in a new browser tab and switch to that tab when loading of the tab is finished (meaning the tab is loaded and the css-transforms get applied while the viewport is currently not visible), the items do not get positioned correctly (screenshot). Good news is that I can not reproduce this in my regular version of Safari!

[fk]

David, sorry for comment-flooding here, but this time it's good news:
Everything is behaving as it should in Safari 5.0.2 (5533.18.5), OS X 10.5.8, on the newer MacBook Pro of a colleague who just dropped in (he's got a NVIDIA GeForce 9400M, I've got an ATi Radeon X1600 in my older MBP …).

At least for now I'll file this under "edge case bug" and switch back to developing in Chrome and Firefox. ;-)

[fk]

More good news as I finally got around to check this on the machine of a friend who bought his MBP the same week as I bought mine – the two machines are as identical as it gets, but he's running Mac OS X 10.6 and Safari Version 5.0.5 (6533.21.1) – and can not reproduce the bug.

[desandro]

See also #50