Safari transform animation not responding to dynamic width

Question

Having issues making this behave properly on Safari (works fine on Chrome and Firefox): https://jsfiddle.net/my794fyx/4/

In the fiddle, the redbox should move from left to right with a shifting pivot-point. The red box is moved by animating the left property. The pivot-point is shifted by animating translateX().

The importance of having a shifted pivot point comes to play when hovering over the black box: the width of the redbox grows. The direction the red box grows in is determined by the pivot-point -- when the redbox is on the left, it should grow to the right, and when it's on the right, it should grow to the left. This can be seen working properly on Chrome and Firefox.

On Safari, when you hover over the black box and the red box grows in width, it doesn't seem to be taken into account by transform: translateX(-100%). When hovered, the red box exceeds the black box.

Looking for some work-arounds to the browser issue or alternative implementations to the problem.

score 0 · Answer 1 · edited May 23 '17 at 11:46

You might want to try using the -webkit- prefix on the transform and the @keyframes so:

@-webkit-keyframes {
    0% {
        left: 0%;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        left: 100%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

But just remember that the original must be kept as well! And that you have to add -webkit- prefixes to that for safety, in case one does not support @keyframes without the prefix but not the transform, though it's more likely the other way around, as the above code has.

Also see: here

Safari transform animation not responding to dynamic width

1 Answers1