Browser downloads background image (set using CSS variables) every time style updates, why?

user_11635268 0
Viewed 313

I notice the buttons on my page flickering when I hover on it (will change opacity). After some digging, it turns out the browser re-downloads that image every time the style updates.

This happens on Mac Chrome 74, and Safari. Firefox seems fine.

The buttons is styled using background-image with CSS variables, the code looks like this:

body {
    --src-image: url("some image");
}

.btn {
    background-image: var(--src-image);
}

.btn:hover {
    opacity: 0.7;
}

Codepen: https://codepen.io/polyamide/pen/qzEVzO

Repro steps:

  1. Open DevTool and disable cache.
  2. Hover on and off on the second image (this one using CSS variable, while the first one is not).
  3. See network panel. There will be a new request when the style updates.

Avoid using css variable solves the problem, but I still want to understand why is this happening, and how can I fix it?

css-variables css
1 Answers

I have the same issue with Safari and Firefox. The only way it works without the flickering is not using the variables for images:

background-image: url("some image");

I have been tried a lot of solutions like adding this for example:

-webkit-transform-style: preserve-3d;

But those "solutions" don't work at all.

user_107396800
Related