Позиция CSS: странное поведение в разных браузерах в зависимости от значения переполнения тега "html" и "body" - PullRequest
0 голосов
/ 20 февраля 2019

это произошло при работе над конкретным проектом.У меня был div со следующим css:

div.my-div {
  position: sticky;
  top: 60px;
}

(к нему также применяются другие стили, ни один из которых не влияет на значения css, связанные с position: sticky).

этот div стал былипкая, когда страница прокручивается и достигает верхней части области просмотра, но при прокрутке немного больше исчезнет, ​​как если бы ее заменял другой липкий элемент.в целях тестирования я закомментировал все остальные элементы на странице и вставил только фиктивный элемент div с достаточной высотой, чтобы включить прокрутку, и поведение осталось прежним.

это поведение также ограничивалось Chrome и Firefox (обапоследняя версия) и я не смог воспроизвести его в Safari.Удивительно, но этот фрагмент CSS исправил проблему:

html, body {
  overflow-x: hidden;
}

установка overflow-x на hidden только на body или html не работала, и это исправление вызывало другую прокрутку только для Safari.связанные вопросы.

Я решил проблему, изменив значение overflow-x на html и body, используя JS, в зависимости от того, является ли браузер Safari или нет.Тем не менее, я чувствую себя в целом неудобно с этим решением.у кого-нибудь еще были подобные проблемы?какие-либо идеи о том, что может быть причиной этого, и есть ли какие-либо решения для этого, не включая фрагменты JS, определяющие, является ли это Safari или нет?

1 Ответ

0 голосов
/ 20 февраля 2019

position sticky все еще не широко / полностью поддерживается во всех браузерах.

Родитель с переполнением, установленным на auto, предотвратит работу position: sticky в Safari

Firefox 58 и ниже, Chrome 63 и ниже и Safari 7 и ниже не поддерживают липкие заголовки таблиц.

- известные проблемы, вы можете увидеть, насколько широко они поддерживаются, и текущие проблемына caniuse.com

Доступны полифиллы, такие как stickfill , но даже у них есть свои ограничения.Я использовал Stickybits в прошлом и был приятно удивлен, если вы хотите проверить это.

stickybits('[your-sticky-selector]')

...