CSS 动画 chrome 滞后

Question

在 chromium 中，动画看起来很滞后，在 safari 中没有这个问题。但也有一个问题，由于某种原因，下边框并不总是适合，它在 gif 上也是可见的。

body {
  background: black
}

.button {
  padding: 1px;
  margin: 20px auto;
  display: table;
  overflow: hidden;
}

button {
  color: white;
  border: none;
  background: black;
  position: relative;
  padding: 10px 20px;
}

button:before, button:after {
  content: '';
  position: absolute;
  display: block;
  width: 50%;
  z-index: -1;
  height: 50%;
  transition: 2s ease;
}

button:before {
  bottom: -1px;
  left: -1px;
  background: radial-gradient(ellipse at 0 100%, white 0%, transparent 80%);
}

button:after {
  top: -1px;
  right: -1px;
  background: radial-gradient(ellipse at 100% 0, white 0%, transparent 80%);
}

button:hover:after, button:hover:before {
  width: 200%;
  height: 200%;
}

   
<div class="button">
    <button>Submit</button>
</div>

Answer 1

这是一个图形问题

这是图形渲染的问题。您可以尝试通过优化 chrome 和您的计算机来改进浏览器的图形渲染。

1. 确保所有驱动程序都是最新的
2. 确保您的应用程序是最新的
3. 关闭不必要的标签页和窗口
4. 卸载浏览器插件/扩展

硬件实验 Acceleration

Buried in Chrome's settings is a way to enable hardware acceleration, which may or may not improve Chrome's performance on your computer. Hardware acceleration allows the CPU to offload some page-rendering and loading tasks to your system's GPU.

There is some debate on whether hardware acceleration helps or harms performance. I don't find it does much of anything, but perhaps it'll help your system run Chrome more effectively. Plus, it's worth investigating to see if you have hardware acceleration enabled or not.

• To find the setting, click the triple-dot Menu button and choose Settings.
• Scroll down to the bottom of the Settings page and click Show advanced settings.
• Scroll down to the System section and check (or uncheck) the box for Use hardware acceleration when available.
• Restart Chrome.

Again, your mileage may vary with hardware acceleration, but it's worth checking out to see if you are better of with or without it.

按下重置按钮

If all else fails, you can reset Chrome and return the browser to its default settings. Resetting Chrome doesn't wipe everything out; your bookmarks, browsing history and saved passwords are not reset. What you will lose in resetting Chrome is your start page, new tab page, pinned tabs and default search engine (if it's not Google).

The Reset button is directly below the hardware acceleration setting on the advanced settings page. Click the Reset settings button and then click Reset to confirm your intention.