I used the -webkit- stuff and it doesn't animate for some reason, even though the same code with -moz- prefix works in firefox.
The background is meant to slide down, then the background changes & the new animation should start. The new animation is the same, the background slides in, then slides down out of the box, then the new one comes in again.
http://jsfiddle.net/6sQTJ/
The correct answer, given by #Gerben, was that you can't mix % positions with pixel 'px' positions in the CSS3 animation. Even though it will work in FireFox, it won't work in some other CSS3-animation-enabled browsers.
Related
I have the following code in my website which will animate two background images, transitioning them over one another and from left to right - http://codepen.io/anon/pen/pJKmn/.
Modifying the HTML and CSS from the codepen, how would I be able to implement a cross-browser and device solution to work not only just in Opera and Firefox Mozilla, but also Internet Explorer, Google Chrome and Apple's Safari?
Just add browser prefixes like this http://codepen.io/anon/pen/eryni/
While testing an SVG animation I've run into a rendering problem in Chrome Version 23.0.1271.95.
The animated triangles seem to leave some black vertical banding.
This goes away if you tab away from the page and back or if you otherwise force a redraw.
You can find the animation test here:
http://bit.ly/HexaGridTest
And here's a screenshot:
Looking at other posts on similar issues it seems that the only way to eliminate this GPU-acceleration-related problem is to force a redraw at the end of the animation.
Someone suggested adding -webkit-backface-visibility: hidden to the SVG, but this didn't solve the issue for me.
Is there any alternative? Any flag or CSS property I could set to avoid the artifacts?
I have an apple like coverflow element built using CSS3 transition and 3D transforms.
http://jsfiddle.net/7eDkb/1/ (Transition with box-shadow)
Works smooth on chrome, but on firefox, the covers are flickering between being visible and invisible when they are being animated.
After an elimination process, i have found that removing the "box-shadow" css property from the items results in smooth transitions in firefox.
http://jsfiddle.net/7eDkb/2/ (Transition without box-shadow)
I have tested this in firefox v15 and chrome v21.
Is there a solution to having both 3d transitions and box-shadow on an element without it flickering on firefox?
EDIT: in the fiddles, click gray images to see flickering
There is a good reason no one answered this question yet, It's a firefox bug.
I've submitted this to bugzilla, and it was confirmed as a bug.
https://bugzilla.mozilla.org/show_bug.cgi?id=790239
As #Kyle stated in his comment, the current best solution is to use a non-elegant alternative to box-shadow in the case of firefox.
I'm doing HTML/CSS/Javascript development on iPad. I'm using css transform to translate gallery elements (li elements within an ul). The li's contain text. It all animates fine on desktop, but on iPad 2 device the animation phase makes the font somehow less bright, and when animation is completed the font returns normal. The difference is really visible, almost like going from regular font to bold and back. As said, it all is well on desktop safari, only happens on iPad mobile safari.
Anyone having the same issue?
.pom.
I've seen this and other slightly odd behaviour which is down to hardware acceleration for 3d transforms but I haven't found a single standard 'fix'. In order to try better to understand the problem, take a look at tips here:
http://davidwalsh.name/translate3d
and here:-
How to force re-render after a WebKit 3D transform in Safari
I cannot make the image a background image to a div and round the div's corners because the image is resized, and as far as I know, you cannot resize a background image.
What are my options, if any? Open to all suggestions including wrapper divs and corner images.
Also, if it cannot be done in IE but there's a solution for Firefox, that's just fine with me.
If you're re-using the image and it's varying in size, you should be chopping up your corners accordingly if possible. I had a quick look for you, and here's a site that shows you how to achieve it using sprites. This increases your markup because you need to use positioned divs to position each section of the box.
Of course, recent versions of Firefox, Safari, Opera and Chrome support border-radius which allows you to create rounded corners without using images. IE9 will support this too, when it gets released.
I've seen sites that use border-radius and just leave it at that, so the borders aren't rounded in browsers that don't support it.
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
The jQuery corner plugin is what I use. You can do:
$('#div').corner('10px');
I am not sure, but maybe you can achieve what you want by using svg backgrounds. This will not work in IE.