Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Webpage breaks when the reload page button is pressed until the window is resized, but works otherwise.

more options

A website I'm working on (http://dafluffypotato.com/hitbloq) breaks frequently in many different ways when the reload page button is pressed. The page itself is a static page and the HTML is correct when viewed in Inspect Element, which leads me to believe it's a bug with Firefox. However, the issue never occurs when visiting the page for the first time or when reloading the page by clicking a link on the page that links to itself. Resizing the Firefox window horizontally fixes the issue, but just resizing it vertically does nothing. For one of the ways the page breaks, the elements of the table get their height set to the maximum div height for Firefox. Changing the height of the broken element through the Inspect Element tool after the page has loaded fixes the maximum dif height issue. I was unable to check information through Inspect Element for the other ways the page breaks, because opening the inspect element tool on the broken page switches it to being broken the first way with the max height divs.

What the page looks like when it loads correctly: https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-10-17-15-39-32-1eb7b8.png

The most common way the page breaks upon refresh: https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-10-17-15-40-20-5d1d08.png

The max div height issue: https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-10-17-15-40-52-cfea63.png

I am on version 69.0.3 (64-bit), but it the issue only occurs for some users even while on the same version of Firefox. It also does not occur on Chrome.

A website I'm working on (http://dafluffypotato.com/hitbloq) breaks frequently in many different ways when the reload page button is pressed. The page itself is a static page and the HTML is correct when viewed in Inspect Element, which leads me to believe it's a bug with Firefox. However, the issue never occurs when visiting the page for the first time or when reloading the page by clicking a link on the page that links to itself. Resizing the Firefox window horizontally fixes the issue, but just resizing it vertically does nothing. For one of the ways the page breaks, the elements of the table get their height set to the maximum div height for Firefox. Changing the height of the broken element through the Inspect Element tool after the page has loaded fixes the maximum dif height issue. I was unable to check information through Inspect Element for the other ways the page breaks, because opening the inspect element tool on the broken page switches it to being broken the first way with the max height divs. What the page looks like when it loads correctly: https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-10-17-15-39-32-1eb7b8.png The most common way the page breaks upon refresh: https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-10-17-15-40-20-5d1d08.png The max div height issue: https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-10-17-15-40-52-cfea63.png I am on version 69.0.3 (64-bit), but it the issue only occurs for some users even while on the same version of Firefox. It also does not occur on Chrome.
Attached screenshots

Chosen solution

It seems unstable after reloading. The initial display is off, and after a while, the table disappears completely. Each reload looks different.

You might be mixing things that do not mix well in Firefox. The first cell, with the picture, is set to display: grid instead of the default behavior of display: table-cell.

If I override that using a Stylus user style --

.leaderboard-item .picture {
    display: table-cell !important;
}

-- everything works normally. So there is an issue with using grid this way. Could be a bug, I don't know, my exposure to grid is scant.

Read this answer in context 👍 1

All Replies (1)

more options

Chosen Solution

It seems unstable after reloading. The initial display is off, and after a while, the table disappears completely. Each reload looks different.

You might be mixing things that do not mix well in Firefox. The first cell, with the picture, is set to display: grid instead of the default behavior of display: table-cell.

If I override that using a Stylus user style --

.leaderboard-item .picture {
    display: table-cell !important;
}

-- everything works normally. So there is an issue with using grid this way. Could be a bug, I don't know, my exposure to grid is scant.