Element loses sticky behavior on switching to RTL

user_17281205 0
Viewed 59

I need to place a pseudo-element ::after inside the scrollable container in a non-scrollable way.

I achieved this only with position: sticky (as position:absolute is scrollable).

BUT on switching direction to RTL:

Chromium: the element fully misplaced ISSUE (Please vote for the issue)

Safari: the element placed right, but not sticky

Firefox: no bugs, works as it should ✅

.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;
}
<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>

How it should work

How it should work

right-to-left sticky css html
1 Answers

position: sticky has a good few limitations, one of which is ltr compatibility.

as far as i can see, you don't actually need sticky behaviour though, so what i'd suggest is have another parent container around your ltr-able element, and move your non-scrollable after element into this and use position: absolute;:

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

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

.rtl ~ .example-wrap .example {
  direction: rtl;
}

.example-wrap {
  position: relative;
}
.example-wrap::after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  background-color: lightcoral;
  position: absolute;
  
  top: 0;
  left: 0;
  opacity: 0.8;
}
<button onClick="this.classList.toggle('rtl')">TOGGLE RTL</button>
<br>
<br>
<div class="example-wrap">
  <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>
</div>

user_122856430
Related