iOS 12 Safari iframe + position：fixed + translate3d bug

Question

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

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

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

除了iframe，position: fixed和translate3d之外，这个bug似乎要求.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
}

Answer 1

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