iOS 12 Safari iframe + 位置：固定 + translate3d 错误

Posted 2023-02-24

【中文标题】iOS 12 Safari iframe + 位置：固定 + translate3d 错误

【英文标题】：iOS 12 Safari iframe + position: fixed + translate3d bug

【发布时间】：2018-11-12 15:25:55

【问题描述】：

任何想法如何解决这个问题？我无法删除任何 css 属性或 iframe，因为更复杂的应用程序需要这些属性，但我对某种解决方法感兴趣。

预期行为：石灰色元素在滚动时完全可见。

观察到的行为：当滚动超过某个点时，石灰色元素会部分消失。

除了iframe、position: fixed 和translate3d 之外，该错误似乎要求.item 具有一定的宽度（在iPhone X 上>1024px）。

Example of Plunker

index.html 样式

html, body 
    height: 100%;
    width: 100%;
    margin: 0;


body 
    height: 1500px;


iframe 
    width: 100%;

iframe.html 标记： #app > #gallery > .item

iframe 样式

#app 
    height: 800px;
    font-size: 1rem;


#gallery 
    position: fixed;
    transform: translate3d(0, 0, 0);


.item 
    width: 1025px; 
    height: 800px;
    background: lime

【参考方案1】：

我遇到这个问题已经有一段时间了，终于找到了适合我的修复方法。减小 div 消失的宽度（在 iframe 中），以确保它小于手机屏幕宽度的大小。我尝试了所有的 CSS 技巧（翻译、触摸滚动等）以及网络上的所有其他东西。这是唯一有效的方法。