Ответ 1
Пожалуйста, попробуйте это, источник здесь
.add-to-block {
transform: translate3d(0,0,0);
.....
.....
}
Я запускаю мобильный проект, который имеет несколько модулей, имеющих элементы, установленные как фиксированные. Проблема, с которой сталкивается, - это только браузеры, работающие на iOS. Точная проблема заключается в том, что всякий раз, когда я tr для прокрутки по телу страницы, имеющей, скажем, нижнюю панель инструментов, как фиксированную, весь фиксированный элемент перемещается соответственно со свитком, и как только свиток заканчивается полностью, тогда только он возвращается к своему назначенное место.
Я дал телу страницы относительное правило css. Помогите, так как это происходит только на iOS.
.add-to-block {
background: #fff;
position: fixed;
bottom: 0px;
right: 0px;
display: block;
height: auto;
width: 100%;
*(inner content element) {
inner content element styling...
}
}
Пожалуйста, попробуйте это, источник здесь
.add-to-block {
transform: translate3d(0,0,0);
.....
.....
}
На самом деле нет простого ответа на этот вопрос, так как это известная проблема на ios на некоторое время (предположительно фиксированная в ios8), но это дает вам несколько способов исправить ее: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios, он описывает все проблемы с позицией, закрепленной на устройствах ios, и возможные способы ее устранения, если вам нужно ее использовать.
Ни одно из предложенных решений не сработало для меня, хотя у меня был фиксированный элемент внутри элемента прокрутки (и он был перемещен вверх), у меня не было свойств преобразования или создания слоя для родительских элементов (и я создал слой на фиксированном элементе) и т.д..
Моим решением было просто заменить фиксированный элемент на position: sticky;