2038272 - www.wowow.co.jp - Search input is pushed off screen

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Ksenia Berezina [:ksenia]]

Environment:
Operating system: Windows
Firefox version: Firefox 150.0.1 (release)

Preconditions:

• Clean profile

Steps to reproduce:

1. Navigate to: https://www.wowow.co.jp/
2. Observe the search field in the right top corner

Expected Behavior:
Search field within the page boundary

Actual Behavior:
Search field is pushed off screen

Notes:

• Reproducible on the latest Firefox Release and Nightly
• Reproducible regardless of the ETP setting
• Works as expected using Chrome

---

Created from webcompat-user-report:e5acfcba-e9b8-464b-b71f-08ded37bef9a

Comment 1

[Jeff Muizelaar [:jrmuizel]]

Attachment: LLM produced test case

Safari has the same behaviour as us.
Daniel, do you know who's right?

Comment 2

[Daniel Holbert [:dholbert]]

The reduced testcase looks like maybe flex container intrinsic sizing isn't quite working out to properly hold all of the children (at the sizes that they end up flexing to).

Given that, I suspect this is a version of bug 1055887, an update to the flexbox intrinsic sizing algorithm, which went through some revisions but finally stabilized as of bug 1055887 comment 31 (2 years ago), which Chrome has shipped but Firefox and probably Safari have not.

Comment 3

[Daniel Holbert [:dholbert]]

Note, I can only reproduce the "Search field is pushed off screen" issue at certain viewport-sizes:
Up to a viewport-width of 1209px, there are no issues.

At viewport-width 1210px and above, the search button expands to be a full search field, which Chrome handles nicely and Firefox/Safari do not:

• In Chrome, the search field expands to the left, pushing its neighbors leftwards into space that would otherwise be blank. (no overflow)
• In Firefox/Safari, it expands to the right (and moves slightly to the right), and overflows off the right size of the page.

At viewport-width ~1764px and above, there's enough space that the search field finally fits on-screen again.

Comment 4

[Daniel Holbert [:dholbert]]

Here's a suggested intervention, which fixes the issue for me and doesn't have any side effects that I've noticed:

header .__localsearch {
    width: clamp(180px, 16vw, 220px);
}

This is just repeating the flex-basis component of the flex shorthand from the site's following bit of CSS, but framing the value as a width (which is safe to do because generally width doesn't matter for a flex item in a horizontal flexbox that has a specified flex-basis, except to influence its intrinsic sizing contribution to the container, in Firefox and Safari -- that sole effect is the one that we want to benefit from here):

header .__localsearch {
	-moz-box-flex: 0;
	flex: 0 0 clamp(180px, 16vw, 220px);
	container-type: inline-size;
	display: flex;
	-moz-box-orient: horizontal;
	-moz-box-direction: normal;
	flex-flow: row;
	height: 100%;
}

https://www.wowow.co.jp/assets/css/screen_ng.css

(One of the changes in bug 1055887 will be to directly use the flex-basis as part of the intrinsic sizing contribution in cases like these, which would get us the expected outcome here.)

Comment 5

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 2038272 - add a desktop-only CSS intervention for www.wowow.co.jp; r?ksenia

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/21e5f428340f
https://hg.mozilla.org/integration/autoland/rev/6412c97942f1
add a desktop-only CSS intervention for www.wowow.co.jp; r=ksenia,webcompat-reviewers

Comment 7

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/6412c97942f1