My code is in here http://jsfiddle.net/JaB5S/
You can click the blue page to run the animation.
But whenever you do though, you can see the texts flickering until the animation is done. The text on the right side even disappears.
I've read somewhere that backface-visibility: hidden; should solve the problem, but I already have it but still cant fix it.
This is my first time working with css animations so any help would be very much appreciated.
Thanks!
what you need is adding
-webkit-transform-style: preserve-3d;
to #main-container, I updated your fiddle: http://jsfiddle.net/JaB5S/2/
Related
I'm using webkit-perspective to animate slide transitions in css. It works well on all major browsers except safari.
The second slide has a flicker on the text. I found solutions here that includes -webkit-backface-visibility: hidden;
on the parent element. But it didn't work for me. The site is: http://www.venicedev.com I think this is happening because of my canvas element on the back of the text. But I can't found any turnaround for this.
Anyone can help me with this?
adding z-index:1; seems to have helped
There is a flicker where all the elements in my animation show up before the animation starts. I thought this was an animation-fill-mode problem, but I can't make it stop doing this no matter what settings to this property I apply. Then I thought it was a webkit thing. But it's now happening on Firefox too. It only happens on page refresh or when one has not visited the page after several hours. When one clicks on the homepage using the NAV menu, it doesn't do this. I also tried -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden; but these either did nothing or messed up my fancy box 2 lightbox. sorry, it's my first css animation project...I know there is a simple solution to this, but I can't seem to figure out what it is!! Your suggestions are greatly appreciated....
http://theflightfantasticfilm.com
animation css is here
/css/theflightfantastic.css
and
style css is here
/css/style.css
I just build this website : http://rcmm.minnie.mico.dk/
And on the front page i have a slideshow (bad UX - I know). If you click one of the small square icons in the bottom right corner the slider will animate.
This works great, except in chrome for mac. Every time the slider animates, all the elements that are positioned absolute will do a tiny pixel-jump. The animations on the slider however is using transform: translate() to do the animation. js is only swapping classes - no actualt animating - thats all handled by css.
Does anyone know why this is, and if there is a possible fix for this?
Any help would be much appreciated.
Simply add -webkit-backface-visibility: hidden; to the <body> and the jumping should stop.
Any time you have minor glitches when using CSS Transforms, backface-visibility: hidden will straighten things out. It typically has to do with how the browser will handle hardware acceleration.
From CSS3 Animations: the Hiccups and Bugs You'll Want to Avoid:
The reason behind this phenomenon is unclear, but the fix is pretty simple. Simply adding the -webkit-backface-visibility: hidden; rule to your CSS should help prevent the problem. Apply it to the container of the element, like so:
.container {
-webkit-backface-visibility: hidden;
}
It boils down to another hardware acceleration problem - using this property simply kicks the acceleration into gear. You could also use things like -webkit-perspective: 1000; or other 3D properties.
See the grey box on this page: http://goo.gl/fL973
When you hover it it's suppose to flip over and show the other side. It works in Chrome, but for some reason i'm getting a lot of flickering during the animation. I tried fiddling around with the rules and even adding a container around the box, but no success.
I read this question, among others: Why is rotateY (flip) css3 animation flickering in Chrome?
The problem seems to be that elements with backface-visibility: hidden; cannot have backgrounds. So, as a workaround, i thought i could have an element inside .front and .back and give that element a background. That didn't work, still flickered.
Other than that, i'm also not sure why it only works in Chrome/webkit. I do have the necessary prefixes for everything, so it should work, shouldn't it?
Any suggestions?
Works fine after moving the backface-visibility: hidden; to the .front and .back instead of .card. The flickering disappeared. Now i'll just have to come up with some fallback for non supporting browsers.
I'm trying to fade in a div in a webapp I'm building for iPad. The iPad chokes trying to use jQuery's fadeIn() method so I'm trying to do the transition with -webkit-transition: opacity 1s linear and changing the opacity to 0 or 1 with javascript. It looks pretty smooth, except that it flickers once quite jarringly at the end of the fade.
As I learned here a while back, this flicker instantly disappears when I set -webkit-backface-visibility: hidden. Unfortunately, when I have that set, the div no longer detects the click or touchstart events used to dismiss it. I'm very confident this is the problem because when I remove that property in the inspector, it will read clicks perfectly. I found someone else mention a similar bug in a comment on SO but no solution was given.
Does anyone have any ideas how to work around this?
The trick was that the divs I was trying to read the click on were in a collapsed 0x0 div. It's a bit bizarre that backface-visibility would make or break that, but I was able to fix the problem by making the previously collapsed container full size and adding js to turn it display block and none at various times.