css - 仅在移动设备上的 translateY 动画期间具有 scaleX(-1) 的元素消失

Question

通过使用翻转图像而不是动态翻转它们，我有一个准解决方法。由于现在仍然发生在右侧的窄带中，因此发生率大大降低。

我放弃。解决方法现在必须到期。

使用scaleX(-i)消失的元素似乎是问题的一部分。不确定解决方案是什么，但这是更大的进步。

我有一个可以在桌面以及桌面 DEV MODE 移动设备仿真中完美运行的网页。

但是，至少在我测试过的所有 iPhone 上，添加到页面的间歇性元素的动画在动画期间会动态消失，但在过渡完成后会重新出现。注意：这只发生在涉及图像的对象（背景图像或 img 标签本身）。如果涉及图像，则整个元素会在变换过程中消失。

当我向 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 + ')';

测试应用

我正在使用 javascript 动态更改新创建的元素的转换。

有趣的是，我发现在移动屏幕的最左侧添加元素效果很好（至少到目前为止）。这是进步。

标签： cssmobiletransformelement