切换至RTL模式后元素position: sticky粘性行为异常问题

需求：在可滚动容器内以非滚动方式放置伪元素::after。
通过position: sticky实现了该效果（position:absolute会随容器滚动），但切换direction为RTL后出现浏览器兼容性问题：

• Chromium：元素完全错位 🟥 （官方已收录该问题，建议投票跟进）
• Safari：元素位置正确，但失去sticky粘性效果 🟨
• Firefox：无问题，表现正常 ✅

代码示例 #

CSS #

.example {
  max-width: 200px;
  overflow-x: overlay; 
  overflow-y: hidden; 
}

.example div {
  min-width: 1000px;
  min-height: 100px;
  background: lightblue;
}

.rtl ~ .example {
  direction: rtl;
}

.example::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  position: sticky;
  outline: 20px solid lightcoral;
  inset-inline-start: 0;
  inset-inline-end: 100%;
  bottom: 100%;
  opacity: 0.8;
}

HTML #

<button onClick="this.classList.toggle('rtl')">TOGGLE RTL</button>
<br>
<br>
<div class="example">
  <div>Some long long long long long long long long long long long long long long long long long long long long long long  text here</div>
</div>

预期效果 #

内容的提问来源于stack exchange，提问作者Andrey Brill