I've encountered a strange issue that seems to be a Safari CSS bug. The problem occurs when the element is being animated and it actually disappears during the CSS transition, only to reappear at its conclusion. Interestingly, this error only happens on Safari, as it works perfectly fine on Chrome and Firefox. Moreover, if the initial position of the animated element is less than half the width of the page, it also works correctly.
If you are using Safari, you can observe the issue here:
To see the problem in action, resize your browser window so that the text aligns with the right edge of the window. Click the Move button, and you will notice the text briefly disappearing and then reappearing in its new position. Press Unmove to bring it back to its original location.
Try making the browser window very wide, positioning the text (in its unmoved state) at the center, and then repeat the animation process. You'll find that everything works smoothly in this scenario.
Below is the complete code snippet:
<html>
<body>
<button onclick="move(true)">Move</button>
<button onclick="move(false)">Unmove</button>
<div id="mover" style="position: relative;transition: transform 0.5s;">
<div style="position: absolute; left: 800px;">
<div>Close to right edge</div>
</div>
</div>
</body>
<script>
function move(doMove) {
document.getElementById('mover').style.transform = doMove ? "translate(-300px, 0)" : "translate(0, 0)";
}
</script>
</html>
While it's possible that there may be some overlooked CSS issues causing this error, the fact that it functions properly in other browsers (and with a wider Safari window) suggests a Safari-specific CSS bug. The original code was generated by a CMS system, and the simplified version displayed above still exhibits the error. Suggestions on adjusting the layout of the web page are not helpful in this context. I have replicated this issue on Safari 13.01 and the WebKit nightly build.
-JM