Webpage breaks when the reload page button is pressed until the window is resized, but works otherwise.
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.
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 👍 1All Replies (1)
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.
