1581268 - Blinking background-image image with url() from CSS variable when adding extra class to element

Status: RESOLVED DUPLICATE of bug 1580820

(Core :: CSS Transitions and Animations, defect)

Description

[Łukasz]

Attachment: firefox-css-var-class-bug.gif

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

1. Use this code:

<div class="dd" style='--url: url("https://www.belightsoft.com/products/imagetricks/img/[e-mail]")'></div>
	<script>
	document.querySelector(".dd").addEventListener("mouseenter", (event)=>{
		event.target.classList.add("aa");
	})
	document.querySelector(".dd").addEventListener("mouseleave", (event)=>{
	  event.target.classList.remove("aa");
	})
	</script>
	<style>
	.aa {	box-shadow: 0 0 5px 5px silver;	}
	.dd {
		background-image: var(--url);
		width: 200px;
		height: 100px;
	}
	</style>

2. Load page with this code.
3. Hover mouse over the image.
4. Move the mouse off the image.
   For now it's OK.
5. Soft Reload page.
6. Again hover mouse over the image.
7. Again move the mouse off the image.
   From now, the picture blinks when hover over mouse on image and when move the mouse off the image and network queries for image.
   After Hard Reload page, it returns to normal.

I showed everything on GIF.

Actual results:

It probably deletes the contents of the entire class value and then adds it.

t The same happens when assigning a value: element.className += " aa".

Expected results:

It should not delete the entire class value just add a new class.

Comment 1

[Łukasz]

Attachment: imagetest.html

HTML file used in GIF.

Comment 2

[Łukasz]

I forgot to add - when I don't use the CSS variable, the bug doesn't appear.

Comment 3

[Łukasz]

When the style change is via the data-* attribute, no error occurs.

In Chrome, this error does not occur.

Comment 4

[Łukasz]

(In reply to Łukasz from comment #3)

When the style change is via the data-* attribute, no error occurs.

In Chrome, this error does not occur.

Sorry, this is not true - I was wrong.

Comment 5

[Peter Magyari (Desktop QA)]

Hi Lukasz,

I've managed to reproduce this issue using Firefox 69.0 / Firefox Beta 70.0b6 and Firefox Nightly 71.0a1 on both Ubuntu 18.04 and Windows 10

I'm setting a component in order to involve the development team in reviewing this issue

Thank you for reporting!

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Dupe of bug 1580820, there's a fix there. It's an image cache bug.

Thanks for the report!

Comment 7

[rossi]

I have this exact bug in v113.0 (macos), you can see it for example on this website: https://docusaurus-openapi.tryingpan.dev/petstore/add-pet
when you click through the menu items or just switch between "default" and "example" in the code sample on the right hand side - the arrows in the sidebar menu are flickering. as soon as you replace the css var with the actual svg url() from the var, it stops flickering.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Let's file a new bug for that, reopening a closed bug from 4 years ago isn't great practice.