ARTICLE AD BOX
I have the following test code, where I have several divs in an inline-flex element. The last div contains some "secret" text. The text should not scroll, so its position is absolute. The divs have gaps between them, but I only want the secret text to appear when scrolling to the end, so I use clip-path to prevent the text from appearing too early. This works on Firefox (148.0.2) and Safari (26.3), but not on Chrome (145). On Chrome, the text stays invisible even when scrolled to. Adjusting the window size is enough to update its visibility. Is this a bug or am I missing something?
.wrapper {
border: solid red;
overflow: auto;
}
.flex-container {
height: 50vh;
display: inline-flex;
}
.onscreen {
width: 20vw;
margin: 0 1vw;
background: #aaf;
}
.offscreen {
width: 60vw;
background: #bbb;
clip-path: inset(0);
}
.offscreen-secret {
position: absolute;
right: 1em;
}
<div class="wrapper">
<div class="flex-container">
<div class="onscreen">1</div>
<div class="onscreen">2</div>
<div class="onscreen">3</div>
<div class="onscreen">4</div>
<div class="onscreen">5</div>
<div class="offscreen">
<div class="offscreen-secret">
Hidden text that does not appear between the onscreen divs
</div>
</div>
</div> <!-- flex-container -->
</div> <!-- wrapper -->
Note: I have tried adding will-change: scroll-position and auto to .offscreen and .offscreen-secret to no avail.
