谁能解释一下这段代码为什么在别的浏览器能工作但在 Safari 下不能工作吗？太离奇了

[weijar]

测试地址：

https://www.oxyry.com/test/img.html

点 Move 后，图片在动画移动中消失了！动画完成后才出来。

这个在别的浏览器没问题，在我的 iPhone 13 Safari 中图片会消失。

虽然 Safari 成吨的 Bug,但这个奇怪在于大部分移动图片操作不消失，但移动到有些位置会消失，想不通为什么。

我的 App 中很多这类移动，最近有点崩溃因为想不到绕过这个 Bug 的方法，你们碰到过吗怎么解决的？

文件源码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
  body { margin: 0; }
  a[href], button { padding: 0.5em; font-size: xx-large; }
  #root { width: 320px; height: 300px; overflow: hidden; }
  #pic {
    transform: translateX(-1000px) scale(2.5);
    transform-origin: left top;
  }
</style>

<button id=btnMove>Move</button>

<div id="root">
  <img id=pic src="https://s3.ifanr.com/wp-content/uploads/2022/01/ms_070621_item1_AI_BehavioralHealth.jpg">
</div>

<script>
btnMove.onclick = () => {
  pic.style.transition = 'transform 1000ms'
  pic.style.transform = `translateX(-1100px) scale(2.5)`
}
</script>

[maplerecall]

@EIJAM 这个帖子的讨论点是 Safari 的 bug ，并且这个 bug 所涉及到的方面还是很基础的规范，而不是什么被 Chrome 推成事实标准的特殊功能（事实上现有 Web 的不少东西反而是被苹果 webkit 搞成事实标准，导致其他内核不得不适配）

所以我不是很理解你贴一个和主题完全不相关的 Google 罪证是什么意思。类比就是我们讨论 go 的问题，你突然冒出一个 java 罪大恶极，这不就直接引战了嘛（然后我就上钩了🐶）

[nbndco]

@EIJAM 怎么还在传这个烂梗。别的不说，这个实习生自己跑出来说叠一层空白 div 就会让硬件加速失效（并且微软之后立刻就修复了，可见只是自己的代码写的烂）也不知道是丢谁的人。

至于这个空白 div 的背后逻辑，我看这篇文章解释的应该差不多。https://medium.com/@jeremy.noring/did-google-cripple-edges-youtube-performance-ce5169d3e5f4

致于 Google 为何不会做这种事，我这么说吧，公司文化先不谈，Google 内部连 Windows 都基本找不着，谁去找 IE 的 bug 来减速 YouTube 。Google 也真没这么牛去找到这些 bug 。

[Goooooos]

@maplerecall #21 这叫围魏救赵

[magicdawn]

前端都知道，safari 新时代的 IE

[dany813]

safari 上面的问题确实不少，几年前改过很多

[sunwang]

感谢各位🙏，今天碰到和楼主同样的问题，已经解决啦