1302406 - Problem loading css in WebExtension

Status: RESOLVED DUPLICATE of bug 1292369

(WebExtensions :: General, defect)

Description

[Karsten]

Attachment: Firefox-Bug.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.101 Safari/537.36

Steps to reproduce:

I have a WebExtension with a content script defined in manifest.json.

The extension loads a HTML fragment using JQuery 3.1.0 and replaces a div element in the current page.
But in sometimes the CSS gets loaded at first, but after a moment the css definition vanishes so that the loaded HTML appears only default style.

Here's the definition in manifest.json:

    "content_scripts":  [
        {
            "matches": ["http://*/*","https://*/*"],
            "js": ["jquery-3.1.0.min.js", "gui.js"],
            "css": ["style.css"],
            "run_at": "document_end",
            "all_frames": true
        }
    ]

And here's the complete Javascript code:

$(document).ready(function() {
	var guiUrl = chrome.extension.getURL("gui.html");
	$("#firefoxDemo").load(guiUrl, function(response, status, xhr) {
		console.log("GUI template loaded. - status: " + status);
	});
});


Steps to reproduce:
1. Install the extension.xpi
2. Put the example HTML files step1.html and step2.html on a webserver (don't load it using file:// !!)
3. Open step1.html and click the link to step2.html
4. The extension should replace a div with a coloured box.
5. Use back and forward to navigate between both pages. At some point you will see that the coloured box will loose its colour.

See also the attached video file.


Actual results:

The HTML fragment is loaded but the css defined in manifest.json is used only for a moment. After that the css definition vanishes so that the HTML fragment looses its style.


Expected results:

When the css has been loaded it must not be overriden later.

Comment 1

[Karsten]

Attachment: See bug on video

Comment 2

[Loic]

Attachment: See bug on video

Comment 3

[Loic]

Attachment: step2.html

Comment 4

[Loic]

Attachment: step1.html

Comment 5

[Loic]

Attachment: extension.xpi

Comment 6

[Loic]

Karsten, I tested with FF51 32bits, I can't reproduce the issue. The colored box is still here after back/clicking on the link 10 times.

Could you test with Nightly too?
https://nightly.mozilla.org/

Comment 7

[Karsten]

I retested with FF 51.0a1 (2016-09-13) 32 Bit. I can't reproduce it there.

But with Firefox Developer Edition 50.0a2 (2016-09-13) 32 Bit the problem occurs after at least 3 attempts.

Small update to reproduce:

1. Open step1.html
2. Click the link to step2.html. The extension should replace a div with a coloured box. 
3. Wait 1-2 seconds.
4. Click the back button
5. Repeat with 1. After some attempts the coloured box will lose its colour after displaying it (see attached video).

Comment 8

[Loic]

Fixing range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e84e72b0a967bcbc362e1a66685d87f49e850bdd&tochange=4c4fcb84ee3930af35eb6cb83c044d6ab8a08abb