SVG Background Flickering Once on Hover

user_1457099 0
Viewed 363

I have a button with a svg background that has also has an svg background for its hover. When I hover over it for the first time after the page loads, there is a flicker, but there is no flicker on any subsequent hover. I thought this may be a loading issue, but even if I load both images on the page independently or pre-load the images, this flicker still occurs so it isn't a loading issue. What is going on?

.minus{
    background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
background-size: cover;
    border: 0;
    display: block;
    height: 20px;
    width: 20px;
}

.minus:hover{
    background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}
<button class="minus">

svg css html
1 Answers

This is because hidden elements / assets are not loaded (inactive selectors or display: none, etc). You have to preload it manually.

Here are some ideas:

Note: The server https://www.svgrepo.com/ sometimes responds with 403 Forbidden. So you probably see no images. (See console)

Preload with CSS

.minus {
  background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
  background-size: cover;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

body:after {
  /* display: none -- does not work anymore due to latest optimizations.*/
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
  content: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}
<button class="minus"></button>

This is just one way of doing it. It may depend on your framework. You could also do this in JavaScript (load images). Or think different: Use a tiled sprite as (one) image and just move the background position on hover. Or just load both at once.

Use sprites

.minus {
  background: 
    url(https://www.svgrepo.com/show/294589/shuffle-random.svg),
    url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
  background-size: cover;
  background-position: 0, 20px;
  background-repeat: no-repeat;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background-position: 0;
}
<button class="minus"></button>

Preload images in HTML

.minus {
  background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
  background-size: cover;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

#preload {
  /* In this case / context display hidden works. */
  display: none;
}
<div id="preload">
  <img src="https://www.svgrepo.com/show/240096/shuffle-random.svg">
</div>

<button class="minus"></button>

Preload images in JavaScript

[
  'https://www.svgrepo.com/show/294589/shuffle-random.svg',
  'https://www.svgrepo.com/show/240096/shuffle-random.svg',
].forEach((imageUrl) => {
  new Image().src = imageUrl;
});
.minus {
  background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
  background-size: cover;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}
<button class="minus"></button>

Search the web with keywords like: css background image hover blinks preload etc

user_92511850
Related