CODEWITHSUNDEEP
cssanimation
Alex
Alex

Reputation: 131

CSS animation chrome lagging

In chromium, animation looks lagging, in safari there is no problem with this. But also there is a problem that the lower border for some reason does not always fit, it is also visible on gif. animation 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>

Upvotes: 1

Views: 2795

Answers (1)

Electron
Electron

Reputation: 1109

This is a Graphics Issue

This is an issue with graphics rendering. You can try and improve your browsers graphics rendering by optimising chrome and your computer.

  1. Make sure all your drivers are up to date
  2. Make sure your applications are up to date
  3. Close unnecessary tabs and windows
  4. Uninstall browser plugins/extensions

Experiment With Hardware 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.

Hit The Reset Button

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.

Upvotes: 2

Related Questions