在 Chrome 页面上使用动画时出现奇怪的背景故障

Question

If i have an animated element followed by another non-animated element, banding effect and various color shifting bugs appear in Chrome. Hard to see, but i recorded a video(if you zoom in on the page, the color shifts, easier to see): https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30%20at%2011.35%20PM.mov

 header { height: 100vh; display: flex; align-items: center; justify-content: center; background: #263238; } header a { animation: scroll-down-anim 1s infinite; } @keyframes scroll-down-anim { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } }

 <header> <a href="#">Animated element</a> </header> <p>if i remove this, the glitch disappears</p>

Any ideas how to fix this? If i remove the <p> element, it works. Also works on any other browser, like Safari.

Answer 1

Well this actually works for me, so I strongly suspect that it's just your graphics card or version of Chrome that's having issues.

However I would suggest that the reason it's happening is that the translate style forces Chrome to render using the GPU and having the P tag there is giving it a hard time.

If you were to force the P tag to use the same translation too then that might fix the issue for you, like this:

p {
    transform: translateY(0);
  }

Answer 2

it has nothing to do with chrome or your codes

Its your gpu ! specially if you have am series Gpu (laptop to be exact)

so what happens is when you're using a ratio or a resolution higher or lower than your monitors native settings you put too much pressure on the gpu !

Update your graphics software by the os itself or bring the resolution back to its factory resolution