Позиция закреплена, направление RTL не работает.CSS

Разбираемся в CSS
Ответить
Anonymous
 Позиция закреплена, направление RTL не работает.

Сообщение Anonymous »

У меня есть оболочка div.container, внутри которой находится div.children. Я устанавливаю позицию:sticky для первого дочернего элемента. У меня работает нормально в направлении:ltr, однако в направлении:rtl липкие элементы не работают.
Я не уверен, это ошибка браузера или мои стили просто неправильные. Обратите внимание, что у меня нет доступа к самому HTML, я могу изменить только CSS-файл и, по возможности, не использовать JS.
Проверено на :

Firefox – успешно ✅

Google Chrome – неудачно ❌

Safari – неудачно ❌

Код: Выделить всё

.container {
margin: 10px;
padding: 0;
border: 1px solid #000;
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
position: relative;
white-space: nowrap;
}
.container.ltr { direction: ltr; }
.container.rtl { direction: rtl; }

.children {
display: inline-block;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
border: 1px solid rgba(0,0,0,0.08);
}
.children.sticky {
position: sticky;
background: #f30;
color: #fff;
}

.container.ltr .children.sticky { left: 0; }
.container.rtl .children.sticky { right: 0; }

Код: Выделить всё

1
2
3
4
5
6
7
8
9
10


1
2
3
4
5
6
7
8
9
10


Отчет об ошибках Chrome

https:// bugs.chromium.org/p/chromium/issues/detail?id=1140374

Подробнее здесь: https://stackoverflow.com/questions/585 ... ot-working
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»