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.
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 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.
I've an issue whereby if you are to hover upon an <li> element that has been skewed (from a CSS3 transform) and a shadow applied to it, the shadow it generates will then be rendered incorrectly. It's probably better to see the issue first-hand here - http://jsfiddle.net/mabbage/BLD5Z/1/
It seems this issue is confined to web-kit browsers (Chrome and Safari). Does anyone know of a workaround to this?
One thing I have discovered when playing around with it is if you remove the shadow of the nav object, then this whole issue disappears (however, I'd like a shadow behind the whole list).
The only solution I could find was to use PNG images to style the <li> elements and the shadow behind it. I'm putting this problem down as a CSS3 bug in webkit browsers.
The following graphic illustrates an issue with png transparency in Internet Explorer, that I am unable to resolve.
Transparancy not so transparent in Redmond. http://img101.imageshack.us/img101/1917/problemkl.jpg
The transparent graphic is the following image.
http://img411.imageshack.us/img411/7959/transparentfade.png
I realize that it might be invisible on white background, so here's the inverse of the same image to aid understanding.
http://img338.imageshack.us/img338/7121/transparentfadeinverse.png
The idea is to provide a soft lead-out which works nicely on Chrome/FF/Safari/Whathaveyou, but obviously one can't have nice things and IE wants to stand out. I would very much appreciate any help on this matter.
EDIT: I've read someplace that combining opacity effects and transparent pngs is not well supported in Internet Explorer. By removing the opacity effect and making suitable changes to my png graphic, I was able to reproduce same animation across all major browsers.
You cannot safely mix legacy DirectX Opacity Filters and transparent-PNGs. In IE9, you can use native CSS3 Opacity safely with PNGs without the problem you encountered.