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

Question

有什么办法解决此问题吗？我无法删除任何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
}

Answer 1

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