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?
Related
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'm trying to create two animated gauges with CSS3 and found a nice solution. The gauges looks perfect in Chrome, Safari and FF but in IE I have a weird bounce effect, which almost seems
The gauges are made with border-radius and clipping.
Here is my code
http://codepen.io/kamante/pen/dyFBL/
I current have transition on all css props of the box of the guauge
transition: 1s all
and I'm suspecting other properties being animated in the process.
How can I target only the rotation on transition, and does anyone have a clue why the box 'jiggles'?
Check this codepen: http://codepen.io/anon/pen/KkgeL/.
How come it's so glitchy when animating it? I'm on Chrome v.33. Works perfectly fine in Safari and Firefox (Safari glitches the same way as Chrome [read below], but instead of the width it's the height).
edit: I can try to explain the glitch for those of you who don't see it. It animates all properties somewhat OK, but at the very end of the animation, the width of the 3 divs instantly changes by a handful of pixels which is very, very undesirable.
For those of you who use Chrome and doesn't see the glitch please comment with your Chrome version.
I'm not sure yet of what is this about, but I added a delay on the transition of .logo > div and the problem was solved but I don't know if you can retain this transition.
Try it and let me know
-webkit-transition-delay: 1s;.
I'm using a reasonably simple CSS transition to create a box that 'flips around' by transitioning two divs 180deg at the same time. When you're on the 'back' of the box, it should be slightly transparent so you can see the underside.
I've got this working fairly easily in all browers, except the latest Safari 7 and on iOS 7. On Safari 7, the animation flickers and the back card just 'pops' to the front at the end of the animation.
This seems to be a bug in the rendering of the animation on newer Safari. Is there a workaround to get this to behave better?
Check out gifs of the animation on Chrome and Safari
See a demo here http://cssdeck.com/labs/flippable-card
Can not test on safari, but a similar bug happened time ago in Chrome.
The solution in that case would have been to move the back 1px in z
.card__back {
transform: rotateY(180deg) translateZ(1px);
backface-visibility: hidden;
}
.card--flipped .card__back {
transform: rotateY(0deg) translateZ(1px);
}
This happened in Chrome because while animating, the spatial order was calculated (I mean, the position of elements in 3d space), and it overrides other factors.
Once the animation is over, that calculation system is no longer used.
As I said before; cann't test in Safari, so I can be sure that this is a solution.
So I managed to replicate the behaviour in my current Safari and thought it was quite interesting.
Here's what I've come up with:
http://codepen.io/anon/pen/usGCL
Basically the backside is already turned around through a -webkit-transform: scaleX(-1); right from the start.
That way you don't have to rotate it back to 0deg.
Now instead of flipping front and back, You just flip the whole container by 180deg, leaving the backside appearing "normal" again. Also the z-index has to change in the process, which makes backface-visibility: hidden; redundant. I guess if modified a little you could use even less jQuery of course.
EDIT
Guess Aperçu's answer is also pretty much what you were looking for.
Just for fun though: http://codepen.io/BenMann/pen/DmjHv
And I agree the backface-visibility is definitely causing the problem.
As mentioned in the question, there are two things happening:
1. The animation flickers: this is due to the click delay in mobile browsers. Basically, a click event fires 300ms after physically tabbing the element. You'd want to listen for touchstart which fires immediately on tabbing, but doesn't fire at all on non-touch interfaces (Fastclick is a nice polyfill that removes this click delay in mobile browsers, but doesn't affect non-touch UIs.)
For the sake of this answer, I'm simply going to bind my listener to touchstart instead of click (therefore, the demo is to be viewed on a touch device):
$('.card').on("touchstart", function() {
$(this).toggleClass('card--flipped');
});
2. The back card just 'pops' to the front at the end of the animation: after some experimentation, it seems that this happens when transform and backface-visibility are both defined on the same element. To work around that, I've kept the backface-visibily on .card__back, but put the transform: rotateY(180deg) on .card__front.
Therefore, .card__front is going to be flipped initially, which means that .card has to be initially flipped as well to compensate for that.
We must also define transform-style: preserve-3d on .card in order for the transform to render .card__front and .card__back in 3D space (as opposed to being flattened).
/* Relevant CSS */
.card {
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-180deg);
}
.card__front {
transform: scaleX(-1);
}
.card__back {
backface-visibility: hidden;
}
.card--flipped {
transform: rotateY(0);
}
Mobile DEMO (to be viewed in mobile Safari or Chrome): http://jsbin.com/aMAwezA/15/
DEMO (for non-touch devices): http://jsbin.com/aMAwezA/16/
EDIT:
After further testing, I found that transform: rotateY(180deg) on .card__front was causing some flickering in Chrome. Replacing it with transform: scaleX(-1) solved the issue. Updated the CSS and demo link above which should work on both mobile Safari and Chrome.
You need to add two transition time, one for the -webkit-backface-visibility and another for -webkit-transform.
If you try to set the transition delay at 0secs, you will see the color change immediatly like you want to.
Try to modify your transition rule like
transition: -webkit-transform 1s ease-in-out, -webkit-backface-visibility 0s ease-in-out;
Or to override the 1sec transition only for the backface-visibility.
EDIT
Without using -webkit-backface-visibility which seems buggy, I think I've got something work playing with the display of the backcard.
See Demo (Tested on Safari 7 iOs 7.0.2 and Mavericks)
So i have this fiddle: http://jsfiddle.net/aA9Rm/1/ . It works just fine in firefox, but i have some issues with it in chrome, and i can't understand why. In firefox if i move the mouse after the hover in the workhover container it works fine, doesn't do anything, but in chrome if i try to click or move an inch, it starts to move (shake) and I don't want that.
I use 3D rotations, from CSS3,
-moz-transform: rotateY(-90deg);;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
Solutions anyone?
I think you encounter the same bug from this question :
CSS Flip Transition Between Two <div>'s
It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :
.cube:hover{
-moz-transform: rotateY(-90deg);
-webkit-transform:rotateY(-89.9deg);
transform:rotateY(-90deg);
}
It's quite hacky but I never found any clean solution.
You can also use pointer-events: none; property in some way to make it works.