Вложенный элемент «position: sticky» не вставляется в Safari, но работает в iframe - PullRequest
Новая
       51

Вложенный элемент «position: sticky» не вставляется в Safari, но работает в iframe

0 голосов
/ 27 марта 2019

Я использую CSS position: sticky, чтобы прикрепить некоторые элементы к моей странице.Я использую <div> s для создания сетчатой ​​структуры (<table> s не подходит для моего варианта использования).Обратите внимание, что это конкретно вопрос position: sticky - я не ищу решение Javascript, и я считаю, что position: sticky должен работать должным образом в зависимости от спецификации и поведения в других браузерах.

Мне нужно вставить строку для вертикальной прокрутки и первую ячейку в этом ряду для горизонтальной прокрутки.Если я использую position: sticky; left: 0; в первой ячейке без , придерживающейся строки, ячейка просто остается влево.Тем не менее, в Safari , если я использую, например. 

.row {
    position: sticky;
    top: 10px;
    width: ...
}
.cell {
    position: sticky;
    left: 0;
    width: ...
}

строка придерживается при вертикальной прокрутке по желанию, но ячейка не прилипаетпри горизонтальной прокрутке.

Код ведет себя так, как нужно в Chrome и Firefox, и в iframe в Safari .

Вот некоторый коддля минимального примера:

CSS: 

.row {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    white-space: nowrap;
    width: 2000px;
    z-index: 30;
}
.cell {
    display: inline-block;
    width: 100px;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    font-weight: bold;
}

HTML: 

<div class="row">
    <div class="cell sticky">Sticky</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    ...
</div>

Загруженные файлы здесь (нельзя использовать codepen / jsfiddle, поскольку они загружаются в iframe):

https://qcn.github.io/minimal_sticky.html Минимальный пример: не работает в Safari, работает в Chrome / Firefox

https://qcn.github.io/minimal_sticky_iframe.html Тот же минимальный пример, загруженный в iframe:в Safari работает!

Еще одна интересная вещь, которую я заметил, заключалась в том, что если я прокручиваю страницу по горизонтали, а затем обновляюсь, липкая ячейка визуализируется слева от окна просмотра, а затем прокручивается нормально в этой позиции (т. е. онавсе еще не прилипает, но он знает, где он должен был быть при загрузке страницы!).Это и тот факт, что поведение работает внутри iframe и в других браузерах, заставляет меня подозревать, что это ошибка браузера, но я не могу найти другие ссылки на нее.

1 Ответ

0 голосов
/ 28 марта 2019

Это, похоже, экземпляр этой ошибки: https://bugs.webkit.org/show_bug.cgi?id=106062

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

...