CODEWITHSUNDEEP
cssperformancegoogle-chrome-devtools
Legotin
Legotin

Reputation: 2688

CSS and scroll performance

I have a tree-like HTML structure consisting of ~1k elements.
Page scrolling is accompanied by a low FPS.
Performance test shows frequent Update Layer Tree, which is takes 60% of the time.

enter image description here enter image description here

I suspect that the reason lies in the CSS: disabled javascript doesn't change anything, but removal of all styles fixes the problem.

So, which CSS-properties or selectors can cause it?

Upvotes: 0

Views: 2196

Answers (1)

SVSchmidt
SVSchmidt

Reputation: 6567

I don't know if any particular CSS rule can cause such behavior. I would have to see the page to inspect it. Nevertheless, a proven technique for making large lists scroll more smoothly is to add transform: translate3d(...) to the list (at least for my company it proved its value). The below snippet gives an example. Maybe this can solve your problem to a degree.

function createList (id) {
  const container = document.getElementById(id);
  
  for (let i = 0; i < 1e5; i++) {
    const div = document.createElement('div');
    div.textContent = i;
    container.appendChild(div);
  }
}

createList('container-1');
createList('container-2');
body {
  display: flex;
  flex-flow: row no-wrap;
}

section {
  height: 500px;
  width: 500px;
  overflow-y: scroll;
}

#container-1 {
  background: red;
}

#container-2 {
  background: green;
  transform: translate3d(0,0,0);
}
<section id="container-1"></section>
<section id="container-2"></section>

Upvotes: 3

Related Questions