hacks.mozilla.org - Scrollable code blocks change height and page layout jumps, when opening/hiding navigation bar

[nyanpasu64]

URL: https://hacks.mozilla.org/2019/03/fast-bump-allocated-virtual-doms-with-rust-and-wasm/

Browser / Version: Firefox Mobile 65.0
Operating System: Android 7.0
Tested Another Browser: Yes

Problem type: Design is broken
Description: Scrollable code blocks change height and page layout jumps, when opening/hiding navigation bar
Steps to Reproduce:

• Scroll down to "Incrementing counter example with Dodrio" code block, or below
• scroll up and down to show and hide the address bar
• the code block size changes when address bar opens and closes
• all of the page below moves up and down.
  issue is similar to https://bugzilla.mozilla.org/show_bug.cgi?id=1277712

Browser Configuration

• None

Reported by @jimbo1qaz

From webcompat.com with ❤️

[softvision-sergiulogigan]

Thanks @jimbo1qaz for this reported issue!

I can reproduce it on one of my test devices:
Samsung Galaxy S6 (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)

The issue is not reproducible on:
OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

Moving to needsdiagnosis.

[nyanpasu64]

I think the code blocks resize themselves to around viewport height (even on desktop when resizing the browser window). For some reason, Firefox Android's window height changes when its top bar expands/collapses.

[karlcow]

The height of the code block is set as

.article pre {
	word-wrap: break-word;
	font-size: 1rem;
	max-height: 75vh;
	overflow: auto;
	padding: 0.5em;
}

so this change when the height changes indeed due to the scrollbar.
And this is probably related to

• window.inner{Width,Height} should return the dimensions of the layout viewport
• Visual viewport should not include scrollbars, but innerWidth and innerHeight should

@theres-waldo another issue with viewport, url bar, and height specified in vh.

[theres-waldo]

Making vh units independent of URL bar transitions will be tracked in bug 1515980 (or a dependency of it). For now, I added this issue to the "See Also" list of that bug.

(Note: unlike window.innerWidth/innerHeight, vh units will not change to track the layout viewport size. They will change to track the visual viewport size with the URL bar hidden. See this document for details.)

[karlcow]

Thanks.

[nyanpasu64]

Should I avoid reporting bugs caused by known Firefox viewport issues?

[theres-waldo]

Should I avoid reporting bugs caused by known Firefox viewport issues?

I think it's helpful to still report them, for two reasons:

1. The volume of webcompat issues associated with a Firefox bug can help us assess a bug's priority.
2. After fixing the Firefox bug, we can re-test the associated webcompat issues and make sure they're really all fixed. In the event that one of them just seemed like the same issue but actually wasn't (which can sometimes happen), we don't lose track of it.

[karlcow]

@jimbo1qaz it's very useful. I closed it as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1515980

Once it is fixed we can trace back to here and test again and sees if we had made the right assumption. If not we will reopen.

So yes, please keep them coming.

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.