仅在移动端出现：设置scaleX(-1)的元素在translateY动画期间消失的问题求助

我碰到了一个头疼的移动端兼容性问题：我的网页在桌面端、桌面端开发者工具的移动设备仿真环境里运行完全正常，但在所有测试过的iPhone设备上，动态添加的带图片元素（不管是设置background-image的容器，还是<img>标签本身），在执行transform动画的过程中会彻底消失，等动画结束后才会重新显示。

问题诱因排查 #

目前已经锁定到和scaleX(-1)的使用相关，具体是我给scaleX添加随机正负乘数的这段逻辑：

let randY = 1; 
let randX = randY * Number(getRandomInt(0, 2) < 1 ? -1 : 1); 
bug.style.transform = 'translate(' + Number(tempX - 20) + 'px, ' + Number(tempY - 20) + 'px) scaleX(' + randX + ') scaleY(' + randY + ')';

另外还发现一个关键现象：在移动端屏幕最左侧添加元素时，这个问题完全不会出现，这给后续排查提供了重要方向。

临时解决方案 #

我目前用了一个临时 workaround：用预先翻转好的图片替代动态通过transform: scaleX(-1)翻转的元素。这个方法大幅降低了问题出现的概率，但在屏幕右侧的窄区域还是会触发元素消失的情况，暂时只能先接受这个方案。

后续进展 #

虽然已经确定scaleX(-1)是问题诱因之一，但还没找到彻底的解决方案，不过已经有了一些排查进展，后续会继续跟进。

内容的提问来源于stack exchange，提问作者Wil Voss