Workaround for Safari bug when an element with animated "translate(%)" is resized

Question

Looking for a workaround for a bug I have encountered in Safari (version 10.1.1), where an element that animates 'transform' with % translation does not update correctly when that element is resized.

Here is a example usage case: where an image is positioned behind a textarea similar to background "cover" by using:

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

Which works as expected.

However, if we animate the transform property to have the same value (but animated):

@keyframes same_transform_as_keyframes {
  0%, 100% { transform: translateX(-50%) translateY(-50%); }
}

animation: same_transform_as_keyframes 1s linear 0s infinite normal none running;

Then in Safari 10.1.1 and iOS Safari the transform works as expected initially, but does not update the offset correctly when the element is resized.

It works fine in Chrome.

Here is a CodePen demonstrating the issue.

Seems to me the issue is that Safari is calculating the % values for the transform, but not recalculating these when the element is resized.

Any ideas or help with a potential fix for Safari would be greatly appreciated. Something along the lines of 'forcing' Safari to recalculate the animation by altering some other property without javascript?

Just to clarify, I am not looking for a workaround to center a background image. I am looking for a workaround to allow the use of animating translate(%) values.

Answer 1

Try using will-change: transform; This "should" force GPU rendering on that layer. There is a performance cost but it sounds as if Safari isn't repainting correctly.

Take a look at the MDN docs. Do note the warning that this should be used as a last resort.

That said, the animation you're using seems costly when the similar non-animated version seems to work quite well.