Webkit Wobble - Sprite Sequence Bug? - css

This is something which has been annoying me for a couple days now.
I have a spritesheet used for buttons, playing the sequence on hover/click/whatever is no problem and looks great (the image in the link is just a quick example of course). Let's say I also want that sequence to reverse on mouseout, in Firefox this plays fine. In Chrome and Safari however the image seems to 'wobble' when it plays a sequence in
reverse.
http://jsfiddle.net/SzcQn/
This example shows a quick mock up of the problem. Try mousing over the image and it will play the sequence, when you mouse out it will reverse it. In firefox this looks fine but in webkit browsers it wobbles.
The image sequence is not at fault, the code is identical for webkit and moz... I can only conclude it is a bug.
Obviously I could simply include an additional 15, in this case, frames which have the sequence reversed... but that seems a needless waste of resources.
Does anyone know of a way to resolve this issue? I have tried it with multiple sprite sheets, multiple ways of activating the animation and different webkit animation settings... the problem only occurs when it is set to play through the images from right to left, ie. in reverse.

Looks like a bug. Probably. I'd file it/search to see if anyone else has reported it.

Related

Animating SVG Path's stroke-dashoffset causes extreme drop in performance in Safari

I have a simple stroke-dashoffset CSS animation on my site, it's what is causing those dashed lines to move in the gif below:
This run's fine on Chrome/Firefox on my Macbook. But when I open it on Safari there's an extreme drop in performance. Every now and then it will start running smooth for a second or so, and then go right back to being choppy and slow. It's somewhat unpredictable.
I made a codepen that uses the same SVG paths and animation - And the problem persists.
I noticed when I make the Safari window smaller, it smooths out very well. Which makes me think it has something to do with how many pixels it's drawing and how often it's drawing them.
I've been looking up this issue with every search phrase I can think of and can't find anything that would help me understand what's happening. I was wondering if anyone had any advice on a workaround for this? Or just some clarification on what is happening here. Thanks.

Antialiased text in Firefox after CSS rotation

so I've read a lot about the current state of rotating text and not being able to perfectly get real antialiasing to happen in all browsers. It looks like the first box in the pic in chrome, but the second, jaggedy box in firefox. I've tried the most popular fixes including -webkit-backface-visibility:hidden; -webkit-font-smoothing:antialiased; and maybe one other I can't remember.
However this is not asking the same question, but a new one I havent found anywhere. These two screenshots of the same box are both taken from Firefox. The jaggedy box on the bottom is what it looks like normally, however, when I mess with the rotation attributes with another(completely different) element on the page with the css edit console, it renders the box perfect / smoothly...
I do, however, have to continue to press up or down to change the rotation value on another element for the entire box to render antialiased perfectly, then it returns to its jaggedy normal self. I rotated the div that the content is in and put the css fixes on the same div(although I did try putting the css fixes on every element) and I didn't ever seem to get any smoothness or antialising like you see in the box above...only when I rotate another element on the page in the browser. WTF?!!?!? is there a way to do this in css or is it only something the browser is doing in realtime and cannot reproduce that smoothness in CSS yet?
EDIT: PIC for comments section
For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.
The fix:
Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:
transform: rotate(…) translate3d(0px,0px,1px);
The explanation:
Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.
The caveat:
However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.
dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.
Jeremy if you come back and answer this I can give the answer to you. just realized I hadn't had an answer to this so I needed to put something here.
This solution worked as in the comments above:
Jeremy:
I had another thought: it could be related to creating an opengl/webgl layer behind the scenes. If you add translate3d(0px,0px,1px) after the rotate transform, does it "fuzz out" a bit more?
Answer - Yes this works to perfectly anti-alias any text in all browsers!

CSS 3D transform Firefox problems

I am trying to implement some css3 involving 3D transforms in a new project i am working on.Although i managed to overcome the limited InternetExplorer support i am having problems making Firefox work.
There seems to be excessive flickering when transforms take place either i use the rotateY(deg) or rotate3d(x,y,z,angle) method and only in Firefox. In Chrome or even in Internet Explorer they work fine.
You can see what i mean in the JSFiddle here.(Hover on the divs to see effect.)
Is there a way to fix and still have a 3d effect that will work in all three Firefox,Chrome and IE?
Edit2: I can confirm flickering in Firefox version 26.0.
You could look at this question Here for other possible ways to prevent flickering.
Edit: I apologize if this isn't much of an answer. I would have commented, but I'm not permitted to.
Edit3: The flickering for #test3d is extremely bad. The animation is rendered completely unviewable and seems to back-track several times before finishing.

Glitching whilst using CSS transitions/translate on iPad when scrolling the page

I've noticed whilst optimising animations for use on iPad using hardware acceleration, I seem to be coming across an issue that I haven't fully been able to resolve. If you are applying webkit transforms such as translate, although the animation runs great, if in the middle of an animation occuring the user scrolls the page, when they release it causes the animation to stutter whereby it reverts to its original position and attempts to continue its animation to it's end point.
I've been looking everywhere for resolve on this issue, having seen it occur on the iPad store as well! If you have an iPad at hand and you navigate to, for example: http://webkit.org/demos/transitions-and-transforms/ , if you select an item then before the button animation has completed drag the page(scroll) then release it, you will see the animation flicker back to its original position and then repeat until its complete.
The only way I've been able to work around this is when a touchmove event occurs, I tell the animation to just stay where at its original location, which stops it from trying to repeat the transition on release, as even attempts to just tell it where to go again cause it to revert regardless (seeing as how css transitions seem not technically able to be stopped).
Has anyone found any workarounds to this issue, I'm pretty sure this is a bug on iPad as opposed to a problem with the animation (this does not involve issues regarding preserve-3d and what have you), or if I should be reporting this as an issue.
Thanks!
Not sure if I'm reading between the lines, but I suspect you might see better results if you use touchend versus touchmove or touchstart.

intermittent background-load bug in Chrome

Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...

Resources