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
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
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/
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.
I'm seeing some strange flickering in a JS submenu implemented using jQuery.hoverIntent on this page here. The flicker only occurs over images that are further down the page, hidden by the appearing menu in Chrome and Firefox and the whole menu actually renders behind those images in IE7. Weirdly, the previous implementation (here) works without the flicker. I'm fairly certain that it's CSS issue, since we are in the middle of a refactoring in which we're trying to consolidate stylesheets and scripts. Any help is greatly appreciated :)
EDIT:
Although my initial answer below still works to fix the issue, here is the real cause of the issue and a better fix.
The image further down in the page is in a positioned div (which is position relative). When the menu loads, it sets the z-index last. If you specify the z-index in your stylesheet, the fade will work and it will no longer flicker. This worked for me while inspecting:
ul#topMenuJs li.qnav0>div {
z-index:5;
}
OLD ANSWER: You are seeing the flicker because you are fading in the dropdown menu. You can do two things:
Get rid of the fade altogether and just do a .show() on the dropdown
Give the ul#topMenuJs li.qnav0>div an opacity:1 !important; to override the js
The latter I tested and it works.
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.