搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

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

  • 1 回覆
  • 1 有這個問題
  • 268 次檢視
  • 最近回覆由 jscher2000

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.

附加的畫面擷圖

被選擇的解決方法

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.

從原來的回覆中察看解決方案 👍 1

所有回覆 (1)

more options

選擇的解決方法

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.