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

[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