cssgoogle-chrome

Subpixel rendering artefact on Chrome when using position: sticky

When using "position: sticky", on Google Chrome, it seems that there is a rendering issue that appears.

See the below example where the background color of the parent (red) appears between two divs, as if Chrome had rendered a space between the two divs.

https://jsfiddle.net/j5ah7yez/7/

enter image description here

Is there a way to avoid this issue (by keeping position:sticky) ?

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: red;
  animation: growShrink 10s infinite alternate ease-in-out;
}

.grid>div {
  padding: 10px;
}

.cell {
  background-color: #ccc
}

.header {
  padding: 10px;
  background-color: #333;
  color: white;
  /*border: 1px solid black;*/
  position: sticky;
  top: 0px;
}

@keyframes growShrink {
  from {
    width: 100%;
  }

  to {
    width: 80%;
  }
}
<div class="grid">
  <div class="header">Hello</div>
  <div class="header">Hello</div>
  <div class="header">Hello</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
</div>

Solution

  • It's a bug that can be solved by having a div with continuous background, instead of separate divs.

    Wrap the header cells with a div (.header-wrapper), and move all .header styles to it. Set the wrapper as a subgrid, which spans all the columns.

    body {
  margin: 0;
  height: 120vh;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: red;
  animation: growShrink 10s infinite alternate ease-in-out;
}

.grid>div {
  padding: 10px;
}

.cell {
  background-color: #ccc
}

.header-wrapper {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  background-color: #333;
  position: sticky;
  top: 0px;
  color: white;
}

@keyframes growShrink {
  from {
    width: 100%;
  }

  to {
    width: 80%;
  }
}
    <div class="grid">
  <div class="header-wrapper">
    <div class="header">Hello</div>
    <div class="header">Hello</div>
    <div class="header">Hello</div>
  </div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
</div>