Bug 76730 – http://css1k.com/#turnaround title graphic is pixelated during animation

• Status: NEW
• Component: CSS

[Ojan Vafai]

This might serve as a good stress test for improving CSS animations. I wonder if bug 64591 would resolve the differences between Chrome/Safari here.

1. The page load animation is considerably more choppy in Chrome than Safari/Firefox
2. Hovering over a blue circle in Chrome is considerably more choppy in Chrome than Safari/Firefox
3. The rotating blue circle is pixelated in Chrome/Safari but not Firefox (there are no images involved).

I tested using Chrome Mac 18.0.1003.1 (Official Build 117090) dev, Safari 5.1.2, today's WebKit nightly and Firefox 9.

[Simon Fraser (smfr)]

> 3. The rotating blue circle is pixelated in Chrome/Safari but not Firefox (there are no images involved).
https://bugs.webkit.org/show_bug.cgi?id=27684

[Simon Fraser (smfr)]

* { -webkit-transition: all 2s; } sadface

[Ahmad Saleem]

I am able to find the working copy of test case since now CSS1k domain exist on .NET TLD rather than .COM (after being forked) but for reference, you can find CSS in question from this Github link:

https://github.com/jacobrask/CSS1K/blob/master/styles/turnaround.css

New Test case link - http://css1k.net/#turnaround

It is still choppy / stutter in animation while loading (big CSS1k button like box) on Safari 15.5 and Chrome Canary 105 as compared to Firefox Nightly 104 but it could be not good choice demo as well.

If some one want to work on, just wanted to provide some reference point and updates. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/96916976>

[Brent Fulgham]

If we compare these animations in current Chrome, Firefox, and Safari in 2024 we do not see animation hitching or choppiness. However, the title graphic is severely pixellated in Safari compared to the other browsers.