it happens only on chrome for ios (happens in safari too but is barely noticeable)
when using:
animation-play-state: paused;
the animation will stutter. here is a reproduction link:
https://codepen.io/capraruioan/pen/gOpBKmg
you will notice that when paused, it will blink to a further location and resumes from the original position when resumed
if using left instead of transform, it fixes it here but it breaks it on other browsers where left animation is jittery
Related
This had me baffled for hours!
I have an SVG animation which was stuttering in Chrome but smooth in Safari - the animation is a few delayed transform: scale(n) on path elements.
I noticed if these were wrapped in a g element, the animation was slow in Chrome, but if this was removed the animation was smooth.
I also noticed if a transform: translate(0, 0) was added to the g element it runs smooth again in Chrome.
Here's an example https://codepen.io/andrewmacmurray/pen/gOmXJqL
My questions are:
Does this happen to anyone else? (I'm using chrome 90)
If so, why does this happen?
I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this:
In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect.
In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the element's animation position.
This seems like a reflow/repaint issue to me. I also noticed that when you hover over the animated element in Safari's inspector, the blue overlay also fails to keep up with the animation.
Here is the code: http://codepen.io/jabes/pen/pNgRrg
I recently stumbled across a similar problem regarding safari and css3 animations, it seems safari has issues overwriting single animation properties when defining the animation using the shorthand pattern. In my case it was the animation-play-state, that could not be changed for safari, so i had to apply the whole animation string at once instead of simply setting animation-play-state: running.
try:
.animator {
width: calc(100% - 100px);
animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}
The delay goes right after the timing function.
I have a rotating css animation that stops when the page is scrolled. I tried enabling the hardware acceleration but without luck.
This doesn't work while the page is scrolled
-webkit-animation: rotating 5s linear infinite;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);
In short: You can't. It's a feature, not a bug. iOS Safari stops ALL JS and animation on scroll to conserve battery life (try scrolling a page of animated gifs, for instance).
I've heard you can use hammer.js to make every scroll a touch interaction, which would mean no such caveats. However, it will suck batteries. Hard.
Here's more: http://eightmedia.github.io/hammer.js/
I'm getting a bug using CSS keyframe animation.
When animating the -webkit-transform property, if I add -webkit-animation-play-state: paused; and then remove it, the animation quickly jumps back to the start and then resumes again.
Here is an example of this in action: http://jsfiddle.net/NAjFf/8/
It even happens when toggling the animation state with javascript: http://jsfiddle.net/NAjFf/7/
Is there a workaround for this issue?
Thanks!
It's a bug issue in webkit, everyone affected by it might be interested in Roman Komarov's technique of tricking WebKit into transitions on pseudos via inheritance.
Checkout the below link
pseudos
:)
I'm trying to develop a slideshow plugin for a project, but I'm running into issues with the CSS3 animations/transitions.
You can view it here:
http://jsfiddle.net/75Sjb/
What I'm trying to do
Each slide has both transform: translate3d(-100%,0,0) and transition: all. This way, slides that aren't active are just outside of the view, to the left, and are ready to be moved around smoothly.
The active slide also has an animation whose from portion says transform: translate3d(100%,0,0), as well as a new transform property in their CSS as translate3d(0,0,0). So they animate from just right to being snug in the view.
The problem
In Webkit
Although the first time picking a slide is animated properly, every other one after that is botched. The slide going from active to inactive doesn't animate out.
In Firefox
In Firefox, the slide going from active to inactive is fine; but the active slide slide in from left (the animation isn't working).
Perhaps this was an issue with older versions of the browsers, but the animation is working fine now.