Search code examples
javascriptcssreactjslistscroll

React scrolling component stutters and list items disappear on laptop monitor only

My component is a basic div with style overflow-y: scroll. The child element is a ul with display: flex; and each list item has only position: relative

My Scroll Component items flash and stutter, some items not displaying. This happens on scroll, but once you've scrolled a little bit the stutter stays permanently. Even after a refresh, then scroll, it continues.

The strangest part is: I have my Macbook Pro connected to a second display monitor. Once I drag the browser window from my laptop display to the second display the behavior stops! Moving it back usually makes the stuttering pick back up quickly.

We recently changed the css and this started. I have fired up the old code on my local and this behavior is gone. We removed a component and just put a <div with overflow-y: scroll, besides that only CSS has changed. When selecting list items with Element Inspector, the shaded selected blue area also stutters (chrome devtools). Any ideas at all? This is killing me!

CSS:

 .listContainer {
  height: 100%;
  padding-top: 8px;
  padding-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */

  @include query(mobile) {
    margin-top: 128px;
  }
}
.listContainer::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
}
.list {
  @include reset-list;
  display: flex;
  flex-direction: column;
  row-gap: $grid-2;
  width: 100%;
}

.item {
  position: relative;
}


<div className={s.listContainer}>
  <ul className={s.list}>
      {filteredProjects
        .map((project, index) => (
          <li
            className={s.item}
            key={project.id}
          >
       {...code with buttons, text, image, etc.}
          </li>
  </ul>
</div>
Solution

  • I linked up with another developer who's had this before, and his fix was to shut down chrome completely (this means manually closing all open tabs so that Chrome doesn't auto-restore your browser session), then shut down his laptop (we both have Mac M1), and let it sit for an hour or so.

    This also worked for me. It seems that there is a bug in Chrome that causes this stuttering and flashing when you've had many tabs open in several browser session and haven't properly shut down your computer in months (I know this is bad in general).

    So if you are seeing this, please let Chrome rest and restart with a clean non restored session after shutting down and restarting your computer.