iOS 12 Safari iframe + позиция: исправлена ​​ошибка + translate3d

Question

Есть идеи как это исправить? Я не могу удалить ни одно из свойств css, ни iframe, поскольку более сложное приложение требует этого, но меня интересует какой-то обходной путь.

Ожидаемое поведение: Лаймовый элемент полностью виден при прокрутке.

Наблюдаемое поведение: Элемент, окрашенный в липовый цвет, частично исчезает при прокрутке выше определенной точки.

Помимо iframe, position: fixed и translate3d, ошибка, по-видимому, требует, чтобы .item имел определенную ширину (> 1024px на iPhone X).

Пример Плункера

index.html style

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 (перевод, сенсорная прокрутка и т. Д.) И все остальное в Интернете. Это единственное, что сработало.