Workaround for Safari error when resizing an element with animated "translate (%)"

Question

Finding a workaround for the error I encountered in Safari (version 10.1.1), where the element that animates the "conversion" with the% translation is not updated correctly when this element changes.

Here is a usage example: where the image is located behind a text box similar to the background "cover" using:

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

It works as expected.

However, if we convert the transform property to 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 conversion works as expected initially, but does not correct the correct offset when the element is resized.

It works fine in Chrome.

Here is CodePen demonstrating the problem.

The problem seems to be that Safari calculates the% values ​​for the conversion, but does not recount them when the element is resized.

Any ideas or help with a potential fix for Safari would be very helpful. Something like “forcing” Safari to recalculate the animation by changing another property without javascript ?

Just to clarify, I'm not looking for a workaround for the background image. I am looking for a workaround to use the translate (%) animated values.