12
谁能解释一下这段代码为什么在别的浏览器能工作但在 Safari 下不能工作吗？太离奇了
source link: https://www.v2ex.com/t/831846
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
测试地址：
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>
第 1 条附言 · 18 小时 33 分钟前
说一下我为什么要这么移动图片：
我在做一个图片查看器，在手指滑过图片后抬起时，图片要有一个动画滑行一段时间，这个代码就是干这个的。
但我发现很多时候滑行中的图片消失了，这和图片的大小和格式没有关系。
我在做一个图片查看器，在手指滑过图片后抬起时，图片要有一个动画滑行一段时间，这个代码就是干这个的。
但我发现很多时候滑行中的图片消失了，这和图片的大小和格式没有关系。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK