Видимость скрытой ошибки Safari ⇐ CSS

[Anonymous]

Я хотел бы использовать visibility вместе с translate, чтобы контролировать, какой контент показывать пользователю.

Поэтому, когда пользователь перемещается по навигации, содержимое ниже перемещается с помощью translateX(), чтобы показать правильную информацию. Затем контейнеры в области просмотра отображаются пользователю с помощью visibility:visible, а контейнеры за пределами области просмотра скрываются с помощью visibility:hidden.

Css для обоих контейнеров выглядит примерно так:

.visible { позиция: абсолютная; ширина: 100vw; преобразование: TranslateX (0 пикселей); видимость: видимая; } .скрытый { позиция: абсолютная; ширина: 100vw; преобразование: TranslateX (-100vw); видимость: скрыта; } Это работает должным образом в Chrome и Firefox, но по какой-то причине в Safari эти свойства не работают должным образом, и браузер прокручивается горизонтально. Вы можете увидеть это поведение самостоятельно, протестировав его по этой ссылке.

Я видел этот вопрос о stackoverflow, но в данном случае решение, похоже, мне не помогло. Я хотел бы сохранить структуру сайта в прежнем виде и надеюсь, что эту ошибку Safari можно решить с помощью обходного пути, спасибо за ваши идеи.