1705715 - CSS Grid edits don't update when programming with a live server

Status: RESOLVED WORKSFORME

(Core :: CSS Parsing and Computation, defect)

Description

[:Emilie]

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

Steps to reproduce:

• Open your IDE, here VS Code with the Live Server and the Browser Preview extensions (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer and https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview)
• Set the Live Server extension to use Browser Preview, and set Browser Preview's browser to Mozilla (private or not, it doesn't matter)
• Create a container and style it using CSS Grid, place items in it and observe the browser load the page
• Edit any property of the CSS Grid: container or items

Actual results:

The CSS Grid properties don't update, even after a shut down of the browser, live server, IDE, or machine, while edits outside of the CSS Grid do.
A refresh of Firefox is necessary for the edits to appear.
The Live Server and the Browser Preview extensions aren't responsible here, as re-installing them didn't fix the issue.
Even opening the page outside of the IDE environment with Firefox doesn't load the changes, it oddly remembers the first version that was on the Live Server, when one loads from an internal address, and the other is loading from the file directly.

Expected results:

The CSS Grid properties update.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'WebExtensions::Untriaged' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[:Emilie]

This is also my first bug report, I tried my best, but let me know if you have further questions, I'll try my best to answer them.
I think it might be in the File Handling category because I was opening HTML files with Firefox, whether directly or through an internal server.

Comment 3

[Rares Doghi, Desktop QA]

I think someone from our Dev Team might have a better shot at reproducing this issue, but I think the Core > CSS Parsing and Computations is a more suitable component for this issue, maybe someone from our dev team can take a look and if its not the right component we can change it to a more suitable one, or even back to File Handling.

In the mean time @Emilie can you please try our latest nightly build and see if the issue occurs there as well ? you can find the build here: https://nightly.mozilla.org/ .

Thank you for taking the time to log this issue.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

A few questions:

• Does disabling the cache on devtools help? (In the "Network" tab, there's a "Disable cache" checkbox).
• If so, can you leave the inspector tab open, perform some change, and copy the network response for the relevant CSS files?
• If not, is there any chance you could attach a copy of the page you're editing, or a page that reproduces the issue, with the changes that you're performing to the stylesheet maybe described in some other way?

Thank you.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Ah, sorry, so what's failing to refresh is the inline preview in VSCode I guess?

How are you configuring Firefox for that? (Sorry, I don't use vscode, so bear with me :)). https://github.com/auchenberg/vscode-browser-preview seems very chrome-centric, though we seem to support the --remote-debugging-port flag that that passes to Chrome so perhaps it all works out somehow?

But there's no mention of Firefox in that extension's documentation, so I suspect it's not a well-tested configuration.

Comment 6

[:Emilie]

(In reply to Rares Doghi from comment #3)
Using Firefox Nightly fixes the issue, thank you for the suggestion. I also discovered the Developer Edition at the same time, and that's the one I'll be using from now on!

---

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

• Does disabling the cache on devtools help? (In the "Network" tab, there's a "Disable cache" checkbox).

I've tried this before reporting the issue, and it didn't.

• If so, can you leave the inspector tab open, perform some change, and copy the network response for the relevant CSS files?

N/A

• If not, is there any chance you could attach a copy of the page you're editing, or a page that reproduces the issue, with the changes that you're performing to the stylesheet maybe described in some other way?

I'm afraid I can't attach anything, or I'm unsure how to do that, but I realized that I didn't give enough information, I'll try to provide as much as I can now: the element I apply the CSS Grid to is a <ul> containing six <li> with the following classes:

.ul-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 225px 225px;
        grid-template-areas: 
            "largeOne smallOne largeTwo smallThree"
            "largeOne smallTwo largeTwo smallFour";
        gap: 2.5rem;
        margin-right: 0;
}

.li-one {
    grid-area: largeOne;
}

.li-two {
    grid-area: smallOne;
}

.li-three {
    grid-area: smallTwo;
}

.li-four {
    grid-area: largeTwo;
}

.li-five {
    grid-area: smallThree;
}

.li-six {
    grid-area: smallFour;
}

I think it's worth pointing out that it's not directly in the main stylesheet, and that it's called with @import url("./grid.css");.

Editing largeOne to largeOneOne would not reflect to the website once the Live Server updates the page automatically, or even after a manual refresh, while other changes on the grid.css file, such as a background-color for example, would as long as the elements to which it's applied aren't in the CSS Grid.

In fact, opening the HTML file outside of the Live Server with Firefox, editing the file in VS Code, saving the changes and refreshing the page in Firefox would not reflect the changes either. Only a refresh of Firefox (in about:support) would work.

---

(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)
I was mistaken by thinking I was using the Browser Preview extension, I dropped it after it became unusable due to a blur on the preview and invested in a second display, but I thought Live Server was still using it. The Live Server extension lets you use any browser you want, but if you want everything in VS Code, you need to use the Browser Preview extension.

---

Important update
It seems like the issue was fixed? I was still able to reproduce the bug yesterday, but this morning when I tried again in order to answer you, I couldn't for some reason. I can't help but think that maybe installing the other versions of Firefox helped, maybe? Which would be odd, but I don't know. I'm really sorry for what feels to be a waste of time. I'm keeping this open in case you have further questions, but feel free to close it.

Comment 7

[Rares Doghi, Desktop QA]

We can close this issue for now but if the issue starts to reoccur we can definitely reopen it. Thank you for all the info Emilie.

Comment 8

[:Emilie]

Alright, sounds good. Thank you for your time!