CODEWITHSUNDEEP
cssgoogle-chromewebkitrenderingsticky
wew82
wew82

Reputation: 21

Position: sticky rendering bug in Chrome

I am having a problem with a seemingly simple series of slides that use 'position: sticky;' CSS.

You can view the page here.

On my version of Chrome (86.0.4240.198 for Mac) the slides disappear before I am able to reach the bottom (after the slide "A FINAL POSTING AND A FINAL RESTING PLACE OF SORTS." everything turns black and no further slides are visible - it doesn't seem to render anything after that point).

This bug only seems to occur when viewing through Chrome in full-screen mode - when the browser window is resized the scrolling and sticky effect works as expected. The sticky position also works fine on Safari and Firefox irrespective of screen size. Through a process of trial and error the CSS elements that seem to be affecting things are the linear-gradient background and the border (when these are quoted out the page works fine) - however, I would ideally like to use these if possible.

Any ideas on a fix gratefully received!

Here is the HTML and CSS in case it might be useful:

<html>

<head>

<style>

body {
  margin: 0;
}

p {
  width: 90%;
}

.slide1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-size: 5vw;
    margin: auto;
    text-align: center;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /*background-color: grey;*/
    font-style: italic;
    color: black;
    box-sizing: border-box;
    -webkit-text-stroke: 0.15vw red;
    background: linear-gradient(to bottom right, lightblue, blue);
    border: 0.15vw red solid;
}

.slide2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-size: 5vw;
    margin: auto;
    text-align: center;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /*background-color: white;*/
    color: black;
    box-sizing: border-box;
    -webkit-text-stroke: 0.15vw red;
    background: linear-gradient(to bottom right, lightblue, blue);
    border: 0.15vw red solid;
}


</style>
</head>


<body>


<div class="slide1">
<p>I honestly don't know why I'm writing this - as no one will probably ever read this.</p>
</div>

<div class="slide2">
<p>Probably because I'm angry.</p>
</div>


<div class="slide1">
<p>No, that's not quite right.</p>
</div>

<div class="slide2">
<p>I'm angry at Yahoo! but I'm also sad and melancholy.</p>
</div>

<div class="slide1">
<p>But the funeral isn't just for Geocities, it's for the person I used to be.</p>
</div>

<div class="slide2">
<p>The person who was Keikimo.</p>
</div>

<div class="slide1">
<p>This site was my first website, created many, many eons ago.</p>
</div>

<div class="slide2">
<p>Since then, many things about me have changed.</p>
</div>

<div class="slide1">
<p>I've grown up, graduated from High School,</p>
</div>

<div class="slide2">
<p>graduated from University,</p>
</div>

<div class="slide1">
<p>got a job and moved into the adult world.</p>
</div>

<div class="slide2">
<p>I've gone through 3 computers and 5 hard drives,</p>
</div>

<div class="slide1">
<p>17 notebooks, 3 binders full of looseleaf paper</p>
</div>

<div class="slide2">
<p>and many other assorted hastily jotted scribbles on pieces of paper.</p>
</div>

<div class="slide1">
<p>I'm a much different person now than the one who started this site.</p>
</div>


<div class="slide2">
<p>But through it all, this site has been here,</p>
</div>


<div class="slide1">
<p>a reminder of who I was and where I've come from.</p>
</div>


<div class="slide2">
<p>It was more than just a collection of my writing,</p>
</div>


<div class="slide1">
  <p>more than just another fanpage</p>
</div>


<div class="slide2">
  <p>and much more than just another lousy webpage from the 1990s.</p>
</div>


<div class="slide1">
  <p>The places I linked, the places that linked to me, it's all old history.</p>
</div>


<div class="slide2">
  <p>But it's my history,</p>
</div>


<div class="slide1">
  <p>a piece of me.</p>
</div>


<div class="slide2">
  <p>Over the years I've continued writing,</p>
</div>


<div class="slide1">
  <p>I've learned a lot more about websites</p>
</div>


<div class="slide2">
  <p>and have many other homes under many other names.</p>
</div>


<div class="slide1">
  <p>So it's probably a good time to put Keikimo away for good.</p>
</div>


<div class="slide2">
  <p>A final posting and a final resting place of sorts.</p>
</div>


<div class="slide1">
  <p>So to anyone out there reading this - thanks.</p>
</div>


<div class="slide2">
  <p>Thanks for visiting!</p>
</div>


<div class="slide1">
  <p>Thanks for listening.</p>
</div>


<div class="slide2">
  <p>Thanks for the memories.</p>
</div>


<div class="slide1">
  <p>Thank you for being there for 12 years.</p>
</div>


<div class="slide2">
  <p>It's been a blast!</p>
</div>


<div class="slide1">
  <p>RIP Geocities.</p>
</div>


<div class="slide2">
  <p>RIP Keikimo.</p>
</div>


<div class="slide1">
  <p>1997 - 2009.</p>
</div>


</body>

</html>

Many thanks

Upvotes: 2

Views: 1239

Answers (2)

Jose Greinch
Jose Greinch

Reputation: 458

If you feel you are not really achieving what you want or you have found a bug on the browser you can:

  • search for a bug issue on chrome and wait for it to be fixed
  • if there's no issue just create one

but most importantly you can simulate the sticky positioning with vanilla javascript and the intersection observer. don't just the onscroll event handler, it will kill your performance!

I have created an article explaining how to go about that if you find it suitable here

Upvotes: 0

Nikas music and gaming
Nikas music and gaming

Reputation: 1282

I can't recreate this issue because I'm on Windows, but if you found a bug you can report it: Report an issue or send feedback on Chrome (Alt+Shift+I)

You will need to add a screenshot, description of the bug, check "send system information", and click send.

I tried the page on Windows Chrome Version 87.0.4280.66 (Official Build) (64-bit) and it works just fine.

Upvotes: 1

Related Questions