html消失延迟,iPad Safari滚动导致HTML元素消失并延迟出现

小编典典

这是我的问题的完整答案。 我最初将@Colin Williams的答案标记为正确的答案,因为它帮助我获得了完整的解决方案。在我问了大约2.5年后,@

Slipp D.

Thompson的一个社区成员编辑了我的问题,并告诉我我正在滥用SO的Q&A格式。他还告诉我将其单独发布作为答案。因此,这是解决我的问题的完整答案:

@科林·威廉姆斯,谢谢!您的答案和您链接的文章给了我引导,尝试使用CSS。

因此,我之前使用过translate3d。它产生了不良的结果。基本上,它将剔除屏幕上的元素,并且不进行渲染,直到我与它们进行交互为止。因此,基本上,从横向看,没有显示我的一半不在屏幕上的网站。这是一个iPad

Web应用程序,由于我已修复。

将translate3d应用于相对定位的元素可以解决这些元素的问题,但是一旦离开屏幕,其他元素就会停止渲染。我无法与之交互的元素(图稿)将永远不会再次呈现,除非重新加载页面。

完整的解决方案:

*:not(html) {

-webkit-transform: translate3d(0, 0, 0);

}

现在,尽管这可能不是最“有效”的解决方案,但它是唯一可行的解​​决方案。使用时,Mobile

Safari不会渲染屏幕外的元素,有时甚至无法正常渲染-webkit-overflow-scrolling:

touch。除非将translate3d应用于由于该滚动而可能会在屏幕外显示的所有其他元素,否则这些元素将在滚动后被切掉。

因此,再次感谢,希望这对其他迷路者有所帮助。这无疑帮助了我很多时间!

2020-05-16

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值