1580820 - CSS variable in background-image produces a new server request every time background-position changes

Status: VERIFIED FIXED

(Core :: Graphics: ImageLib, defect, P2)

Description

[Stephen Cantini]

Attachment: bug.zip

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

Steps to reproduce:

1. Upload the attached files to a webserver (localhost or somewhere else). I've put them online temporarily here: http://tranquilainquietud.com/stephen/bug.html
2. Open the "bug.html" page (not with file:// protocol), open the dev console. Move the pointer over the two images to see the hover effect.
3. Reload the page with F5 or by clicking on the reload icon, one or more times. Move the pointer again over the two images.
4. Shift-Reload the page and check again.

Actual results:

The upper image flickers, because it is downloaded from the server again and again, every time its background-position is changed by moving the pointer over it (see the network tab). The lower image (which has it's background-image forced directly bypassing CSS variables) works fine.

Expected results:

The upper image should behave like the lower one: it should not generate new server requests, independently of the first request cache headers (it works ok in Chrome). It looks like a background-image specified with CSS variables disables caching and forces a resource reload, even if the variable value is constant.

Comment 1

[Stephen Cantini]

NOTE: The unwanted behavior happens after reloading the page one or more times with F5 or by clicking on the reload icon. Sometimes one reload is not sufficient.

Comment 2

[Marcela (Please NI request to Brindusa Tot)]

I was able to reproduce this issue for latest Nightly version 71.0a1 Build ID 20190916093313 using Ubuntu 18.04, Windows 10 as well as mac os 10.14.

Affected platforms:
Ubuntu 18.04
Windows 10
Mac OS 10.14

The upper image flickers after update the page. Browser console shows this message:

[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIContentSniffer.getMIMETypeFromContent]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 277" data: no] FaviconLoader.jsm:277:24
onStopRequest resource:///modules/FaviconLoader.jsm:277
AsyncFunctionNext self-hosted:839

Comment 3

[Emilio Cobos Álvarez (:emilio)]

It is really weird that this happens only after a reload, but I can repro. Also shouldn't really happen in the first place... Maybe a regression?

Comment 4

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=39c8abcf9cb2f40b78289a5535fe550368302423&tochange=fdbb1ad695392bc5e5e00200013dee7c98a54967

Regressed by: 135eaacf1dfc66c289367a665473e67a650407b9 Andrea Marchesini — Bug 1495738 - Image cache entry should compare the window ID together with the loadID because the loadID can be a reused pointer, r=aosmond

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 6

[Timothy Nikkel (:tnikkel)]

Thanks for the testcase, I believe I have found the problem. I'll verify and hopefully post a patch later today.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Ah, cool, thanks Tim.

Comment 8

[Timothy Nikkel (:tnikkel)]

Attachment: Bug 1580820. Update the inner window id as well as the context (document) pointer on an imgRequest if we validate it for that document/inner window id. r?aosmond

If we just update the document pointer and not the inner window id then the request is unusable by any document since both the inner window id and the document pointer must match for it to be re-usable.

Comment 9

[Timothy Nikkel (:tnikkel)]

I'll try to come up with a test for this.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a3224ec885eb
Update the inner window id as well as the context (document) pointer on an imgRequest if we validate it for that document/inner window id. r=aosmond

Comment 12

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/a3224ec885eb

Comment 13

[Timothy Nikkel (:tnikkel)]

Comment on attachment 9093217 [details]
Bug 1580820. Update the inner window id as well as the context (document) pointer on an imgRequest if we validate it for that document/inner window id. r?aosmond

ESR Uplift Approval Request

• If this is not a sec:{high,crit} bug, please state case for ESR consideration: basic cached image functionality was regressed
• User impact if declined: images not using cached version causing flickers
• Fix Landed on Version: 71
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): just applies the same logic to the innerwindowid as we have been doing for ages to the document pointer
• String or UUID changes made by this patch:

Beta/Release Uplift Approval Request

• User impact if declined: images not using cached version causing flickers
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): just applies the same logic to the innerwindowid as we have been doing for ages to the document pointer
• String changes made/needed:

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9093217 [details]
Bug 1580820. Update the inner window id as well as the context (document) pointer on an imgRequest if we validate it for that document/inner window id. r?aosmond

Fixes a caching bug causing image flicker. Approved for 70.0b8 and 68.2esr.

Comment 16

[Oana Pop-Rus]

https://hg.mozilla.org/releases/mozilla-beta/rev/67398bc7737c

Comment 17

[Emil Ghitta, QA [:emilghitta]]

I have managed to reproduce this issue using Firefox 71.0a1 (BuildId:20190912215412) on Windows 10 64bit.

This issue is verified fixed using Firefox 71.0a1 (BuildId:20190918215055) and Firefox 70.0b8 (provided in comment 16) on Windows 10 64bit, macOS 10.13.6 and Ubuntu 18.04 64bit.

Comment 18

[Emil Ghitta, QA [:emilghitta]]

Leaving a ni? on myself to verify this on esr as well (once it lands).

Comment 19

[Ryan VanderMeulen [:RyanVM]]

This needs a rebased patch for ESR68.

Comment 20

[Timothy Nikkel (:tnikkel)]

Attachment: patch for esr

Comment 21

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/releases/mozilla-esr68/rev/3cd88c34effd

Comment 22

[Emil Ghitta, QA [:emilghitta]]

This issue is verified fixed using Firefox 68.2.0esr (provided in comment 21) on Windows 10 64bit, macOS 10.13.6 and Ubuntu 18.04 64bit.