Chrome Slow Scrolling with Fixed Position Elements

Fixed position element is flashing in Chrome when scrolling

Thanks to rd5. He helps me out.

-webkit-transform: translateZ(0);

CSS position fixed strange rendering in chrome when scrolling

The cause of the issue where elements with an opacity of 0 inside the fixed element. Setting those to display: none solved the problem.

How to fix page scroll lag in Chrome

For this example i have too much concerns;

• Get rid of Jquery it is slow and you can do everything with JS (http://youmightnotneedjquery.com/)
• Why timeout? You don't need it. If you are going to use it kill other timeouts so it will not be duplicated.
• Use ES6(Easy to understand, read and code) Also you can compile to lower versions. It keeps you updated in your career path.
• Don't run selectors for each scroll. Use selector before fire scroll.

Here the example:

class ScrollControl {  constructor() {    this.sectionDOMList = document.querySelectorAll('section');    this.initListeners();  }
  initListeners() {    window.addEventListener('scroll', (e) => {      this.animateSections();    });  }
  animateSections() {    for (let i = 0; i < this.sectionDOMList.length; i++) {      if (this.isInViewport(this.sectionDOMList[i])) {       if(!this.sectionDOMList[i].isReveal){          this.sectionDOMList[i].isReveal = true;          this.sectionDOMList[i].classList.add('reveal');        }      }    }  }
  isInViewport(element) {    const elementCenter = (element.getBoundingClientRect().top + element.getBoundingClientRect().bottom)/2;    const viewportTop = window.scrollY;    const viewportBottom = viewportTop + window.innerHeight;    return elementCenter < viewportBottom;  }}
(function() {  new ScrollControl();})();

/* Reset */
html {  -webkit-box-sizing: border-box;  box-sizing: border-box;  text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased;  -webkit-tap-highlight-color: transparent;  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  font-size: 16px;}
*,*:before,*:after {  -webkit-box-sizing: inherit;  box-sizing: inherit;}
body,h1,h2,h3,h4,h5,h6,p,ol,ul {  margin: 0;  padding: 0;  font-weight: normal;}
ol,ul {  list-style: none;}
img {  max-width: 100%;  height: auto;}
/* Base */
body {  width: 100%;  height: 100%;  background: white;  color: #3b3b3b;  font-family: 'Larsseit', Helvetica, Arial, sans-serif;}
.container {  max-width: 1640px;  margin-left: 30px;  margin-right: 30px;}
@media (min-width: 768px) {  .container {    margin-left: 80px;    margin-right: 80px;  }}
@media (min-width: 1800px) {  .container {    margin: 0 auto;  }}
.vc {  display: table;  height: 100%;}
.vc-ele {  display: table-cell;  vertical-align: middle;}
section {  padding: 400px 0;}
section.full-vh {  position: relative;  width: 100%;  height: 100vh;  padding: 0;}
.row {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;}
.col-half {  width: 100%;}
@media (min-width: 992px) {  .col-half {    width: 50%;  }}
.row.align-center {  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
/* Typography */
h1 {  font-size: 52px;}
h2 {  font-size: 26px;}
p {  font-family: 'Larsseit', Helvetica, Arial, sans-serif;  font-size: 16px;  font-weight: 300;  line-height: 1.5;  color: #3b3b3b;}
/* Image reveal */
.image-reveal {  position: relative;  overflow: hidden;}
.image-reveal-cover {  background: #fcfcfc;  position: absolute;  width: 100%;  height: 100%;  top: 0;  left: 0;  z-index: 5;  transform: translateX(0);  -webkit-transform: translateX(0);  transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;  -webkit-transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;}
.image-reveal img {  position: relative;  z-index: 2;  opacity: 0;  transform: scale(1.4);  -webkit-transform: scale(1.4);  transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;  -webkit-transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;}
section.reveal .image-reveal-cover {  transform: translateX(100%);  -webkit-transform: translateX(100%);}
section.reveal .image-reveal img {  opacity: 1;  transform: scale(1);  -webkit-transform: scale(1);}

<div id="page">  <div class="container">
    <section class="full-vh">      <div class="vc">        <div class="vc-ele">          <h1>Scroll down</h1>        </div>      </div>    </section>
    <section>      <div class="row align-center">
        <div class="col-half">          <div class="image-reveal">            <div class="image-reveal-cover"></div>            <img src="https://fearthewild.com/clients/playground/horse.jpg" alt="Horse" />          </div>        </div>
        <div class="col-half">          <h2>This is my horse.</h2>          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>          <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem            ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>        </div>
      </div>    </section>
  </div></div>

Sluggish scroll behaviour of large(ish) html table in Google Chrome

Try to add transform: translate3d(0, 0, 0) to the table. An example is given below. That trick is getting old, however. Postings about it reach back to 2012 already. For instance, see this posting.

Currently, browsers [...] ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.

In my company, we use it for almost every larger list. Mostly, it works fine. Another solution would be virtualization.

let table = '<table style="table-layout: fixed; width: 3000px">';table += '<thead>';table += '<tr>';
for(let i=0; i < 30; i++) {   table += '<th style="width: 100px">#' + i +'</th>';}
table += '</tr>';table += '</thead>';table += '<tbody>';
for(let i=0; i < 5000; i++) {   table += '<tr>';  for(let j=0; j < 30; j++) {     table += '<td>r: '+ i +' || c: '+ j +'</td>';  }  table += '</tr>';}
table += '</tbody>';table += '</table>';document.getElementById('test').innerHTML = table;document.getElementById('test2').innerHTML = table;

#test {  -webkit-transform: translate3d(0, 0, 0);          transform: translate3d(0, 0, 0);}

<h2>With translate3d</h2><div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div><h2>Without translate3d</h2><div style="width: 400px; height: 300px; overflow: scroll;" id="test2"></div>

---

Related Topics