creativetimofficial / material-kit

Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design
https://www.creative-tim.com/product/material-kit?ref=mk-creativetimofficial-github
MIT License
5.91k stars 1.35k forks source link

[Bug] White 'Flashing' on Chrome in Materials Demo #189

Open aburk3 opened 4 years ago

aburk3 commented 4 years ago

Version

2.0.7

Reproduction link

https://demos.creative-tim.com/material-kit/index.html?_ga=2.76346390.2010189574.1599591585-1838309822.1598906035

Operating System

OSX

Device

Macbook Pro

Browser & Version

Version 85.0.4183.83 (Official Build) (64-bit)

Steps to reproduce

Visit link provided. Scroll up and down to trigger the nav-bar transition. It can take a little while of scrolling up and down around that transition to trigger it.

What is expected?

The page not to 'flash' white when scrolling.

What is actually happening?

The page is flashing white.


Solution

I found what I believe to be proposed solutions here (https://stackoverflow.com/questions/20905941/blinking-fixed-header-in-site-with-scrolling-animation) and here (https://davidwalsh.name/translate3d). I'm guessing that -webkit-transform: translate3d(0,0,0); needs to be added somewhere.

Additional comments

I've seen this behavior on the demo site, locally in a repository of my own. As well as a fellow developer working alongside me.