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

2022-02-04 10:46:32 +08:00
 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>
6061 次点击
所在节点    Web Dev
26 条回复
maplerecall
2022-02-04 15:53:37 +08:00
@EIJAM 这个帖子的讨论点是 Safari 的 bug ,并且这个 bug 所涉及到的方面还是很基础的规范,而不是什么被 Chrome 推成事实标准的特殊功能(事实上现有 Web 的不少东西反而是被苹果 webkit 搞成事实标准,导致其他内核不得不适配)

所以我不是很理解你贴一个和主题完全不相关的 Google 罪证是什么意思。类比就是我们讨论 go 的问题,你突然冒出一个 java 罪大恶极,这不就直接引战了嘛(然后我就上钩了🐶)
nbndco
2022-02-04 16:15:46 +08:00
@EIJAM 怎么还在传这个烂梗。别的不说,这个实习生自己跑出来说叠一层空白 div 就会让硬件加速失效(并且微软之后立刻就修复了,可见只是自己的代码写的烂)也不知道是丢谁的人。

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

致于 Google 为何不会做这种事,我这么说吧,公司文化先不谈,Google 内部连 Windows 都基本找不着,谁去找 IE 的 bug 来减速 YouTube 。Google 也真没这么牛去找到这些 bug 。
Goooooos
2022-02-04 16:16:24 +08:00
@maplerecall #21 这叫围魏救赵
magicdawn
2022-02-05 11:57:23 +08:00
前端都知道,safari 新时代的 IE
dany813
2022-02-07 13:15:17 +08:00
safari 上面的问题确实不少,几年前改过很多
sunwang
2022-03-05 17:57:32 +08:00
感谢各位🙏,今天碰到和楼主同样的问题,已经解决啦

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/831846

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX