html - 位置粘性与方向 rtl 不起作用

Question

我有一个 wrapper div.container里面是div.children .我正在设置position:sticky在第一个 child 身上。我在 direction:ltr 上工作正常，但是在 direction:rtl粘性不起作用。
我不确定这是浏览器错误还是我的样式错误。请注意 我无权访问 html 本身 ，我只能改css文件，尽量不改js。
测试:
火狐 - 通过 ✅
谷歌浏览器 - 失败 ❌
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; }

<div class="container ltr">
  <div class="children sticky">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
</div>

<div class="container rtl">
  <div class="children sticky">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
</div>

Chromium 错误报告
https://bugs.chromium.org/p/chromium/issues/detail?id=1140374

Answer 1

position: sticky它的行为有一定的限制，请参阅 https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
请检查是否position: fixed服务于您的目的。

.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);
}
.container.ltr .children:nth-child(2){
  margin-left: 102px;
}
.container.rtl .children:nth-child(2){
  margin-right: 102px;
}
.children.sticky {
    /* position: sticky; */
  position :fixed;
    background: #f30;
    color: #fff;
}

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

<div class="container ltr">
      <div class="children sticky">1</div>
      <div class="children">2</div>
      <div class="children">3</div>
      <div class="children">4</div>
      <div class="children">5</div>
      <div class="children">6</div>
      <div class="children">7</div>
      <div class="children">8</div>
      <div class="children">9</div>
      <div class="children">10</div>
    </div>

    <div class="container rtl">
      <div class="children sticky">1</div>
      <div class="children">2</div>
      <div class="children">3</div>
      <div class="children">4</div>
      <div class="children">5</div>
      <div class="children">6</div>
      <div class="children">7</div>
      <div class="children">8</div>
      <div class="children">9</div>
      <div class="children">10</div>
    </div>