Prevent flicker on webkit-transition of webkit-transform
The solution is mentioned here: iPhone WebKit CSS animations cause flicker.
For your element, you need to set
-webkit-backface-visibility: hidden;
How to remove flicker caused by transition
I can't see the flicker but I have had the same problem. Adding a backface-visibility: hidden !important; or transform: translateZ(0) scale(1,1)!important; worked for me.
CSS animation flickering, tried all tricks I could find
Try changing the animation start delay to 0 in the css:
.animationComplete {
animation-name: complete;
animation-delay: 0s;
animation-duration: 1.0s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
CSS Animation flickering slightly
It is flickering left right because you have a content that is more than 100% of the body, html.
In many browsers they are adding a scroll bar and it pushed the content to the left.
What you need to do is to add a simple css code overflow: hidden
. This way the content will be hidden, the body remains 100% height and the browser won't add scrollbar;
body {
overflow:hidden;
}
CSS @keyframes animation keeps flickering on hover
As @Randy explained in the comment The second you move it, your mouse is no longer on the image. and that causes the bug. you can simply solve this by wrapping the image with a <div>
and use : hover
on the <div>
Here is a sample code for you:
div { display: inline-block;}
img { height: 100px; background-color: red; backface-visibility: hidden; animation-fill-mode: forwards; transform-style: preserve-3d;}
div:hover img { animation: move 1s;}
@keyframes move { 0% { transform: translateX(100px); } 100% { transform: translate(0); }}
<div> <img src="http://www.stickpng.com/assets/images/584181fda6515b1e0ad75a33.png" /></div><p> Sometimes a strange flicker occurs on hover.</p>
CSS Transform causes flicker in Safari, but only when the browser is = 2000px wide
Frustrating huh?
See EDIT4 for the answer to why 2000px is a magic number.
There is a couple of things you can try.
Add
-webkit-transform-style: preserve-3d;
to the elements that are
flickering.add
-webkit-backface-visibility: hidden;
to the elements that are
flickering.move the animating element outside of the parent the flickering
elements are within.
EDIT —
Wesley Hales, said here
"I encountered glitchy behaviour when applying hardware acceleration to parts of the page that were already accelerated"
Its hard to help you debug this without any code. But for starters I suggest you turn on debug mode in safari. Write 'defaults write com.apple.Safari IncludeInternalDebugMenu -bool true' in the terminal.
After this a Debug menu will show up. Choose Drawing/Compositing flags > Show Compositing borders.
This will help you see whats being rendered and by that choose what to put in hardware acceleration and what to leave out.
EDIT2 —
This is worth checking out as well: fast-animation-with-ios-webkit
Its regarding iOs, but I've experienced that - in some circumstances - solutions that work on iOs also works on osx.
EDIT3 —
If you are just asking what happens when its bigger than 2000px I can tell you for sure that on iPhones, WebKit creates textures that are no larger than 1024 by 1024, and if your element is larger than that, it has to create multiple textures.
Documentation on texture limitations
Now, when they do it on iPhone, it wouldn't surprise me if they do the same on OsX, but has a higher limit.
Don't know if this is your case tho. Impossible to tell without any code.
EDIT4 —
"The implementation in TextureMapperTiledBackingStore is pretty simple, and is used only to work around the 2000x2000 texture size limitation in OpenGL."
So, if your element is bigger than 2000x2000 it has to create multiple textures.
http://trac.webkit.org/wiki/CoordinatedGraphicsSystem
CSS animation causes images to flicker
Try adding transform: translateZ(0)
on the child element img
.
function toggleClass() { var box = document.getElementById('box'); box.className = box.className.match(/active/) ? '' : 'active';}
#box { width:200px; height:200px; background-color:#999; opacity:0; transform:translate(0,30px); transition:background-color 0.6s ease, opacity 0.6s ease, transform 0.6s ease;}#box.active { opacity:1; transform:translate(0,0);}img { width:100%; display:block; filter: grayscale(100%) brightness(120%); mix-blend-mode:multiply; transform: translateZ(0); // this rules forces a new layer}#box:hover { background-color:red;}
<button type="button" onClick="toggleClass()">Toggle Image</button><div id="box" class=""> <img src="https://i.stack.imgur.com/GwYD1.jpg" alt="Sample Image"></div>
Related Topics
How to Horizontally Center-Crop Div Inside Other Div
How to Change a Div Padding Without Affecting The Width/Height
How to Dynamically Size Multi-CSS Sprite Image
Styling Web Resources in Dynamics Crm 2016 Supported
CSS "Height: [Percentage]" Behaviour Using "Margin" And/Or "Padding"
What's The Correct Way to Set a Base Rem Value in CSS
A:Visited Is Not Working on Mozilla But Works Fine on Ie
Button Border Radius and Cursor
How to Make Div Same Height as Parent (Displayed as Table-Cell)
Div Not Expanding Even with Content Inside
The CSS Selector for an Element That Its Id Is in The "Foo:Bar" Form
Br Line-Height in Safari and Chrome Leaving Gap