Web-bugs: www.netflix.com - design is broken

[karlcow]

URL: https://www.netflix.com/jp-en/title/70295734

Browser / Version: Firefox 58.0
Operating System: Mac OS X 10.13
Tested Another Browser: Yes

Problem type: Design is broken
Description: The top menu is appearing under the black area.
Steps to Reproduce:

1. Go to https://www.netflix.com/jp-en/title/70295734 with a fresh profile.

On Safari, everything is rendered correctly.

layout.css.servo.enabled: true

_From webcompat.com with ❤️_

[karlcow]

Firefox on top, Safari on bottom.

[karlcow]

adding outlines and putting an artificial margin to better see the boxes.

[karlcow]

The line-height seems to be partially the culprit. Though it doesn't solve everything if we remove it.

.svg-nfLogo {
    text-decoration: none;
    vertical-align: middle;
    fill: #e50914;
    display: inline-block;
    /* line-height: 90px; */
}

[karlcow]

ok removing the line-height AND modifying the padding on .nysmHeader--side--wrapper to be padding: 0 15px;

.nysmHeader--side-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 0 15px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

will fix the issue.

ping @dholbert

when removing the line-height, Firefox defaults to 19.45px for the fonts I have. Though setting line-height to 0 achieves the same thing. Modifying the vertical padding has no influence on Safari.

[astleychen]

Last good revision: 63f44b4968c2 (2014-07-22)
First bad revision: 82df3654cd80 (2014-07-23)
Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=63f44b4968c2&tochange=82df3654cd80

Could be bug 984711 or bug 1037177 as both were relevant to flex fixes.

[dholbert]

I don't have a netflix login that I can use at the moment (though I can try with my wife's later on today), so I can't investigate this directly right now.

However: I would bet the key change in that regression range was indeed bug 984711. That (spec-mandated) change caused a decent amount of breakage, despite doing the "right thing" most of the time. And it's not implemented 100% interoperably yet -- see e.g. https://bugs.chromium.org/p/chromium/issues/detail?id=487302 which might also exist in Safari as well.

When this produces unwanted behavior, authors can generally work around it by setting "min-height:0" on some flex item (child of a column-oriented flex container) that is ending up taller than wanted. Sometimes you have to do this for multiple elements, if there are nested flex containers. @karlcow, you might consider playing around with this since you've reproduced the bug -- as a first pass, you can try the "nuclear option" of adding this rule...
* { min-height: 0 }
...to some stylesheet. That should restore the pre-bug-984711 behavior (though it is also probably overkill and not an actual recommendation -- there are probably only a few elements whose min-height needs tweaking).

[karlcow]

I don't have a netflix login that I can use at the moment (though I can try with my wife's later on today), so I can't investigate this directly right now.

Me neither. This page is accessible without login. I stumbled upon it because of #12466

Indeed adding min-height: 0 to .nysmHeader--side-wrapper fixes the issue.

Thanks a lot @dholbert and @astleychen

Pushing this to contact ready.

[karlcow]

Trying with another page. https://www.netflix.com/jp-en/title/70205019
and still the same issue. ok let's contact them.

[karlcow]

contacted today through the partner mailing list.

[dholbert]

This page is accessible without login.

Nope, it's not accessible to me -- possibly due to geographical restrictions, since I'm noticing "jp-en" in the title. I get an error page saying "Netflix Site Error - Page Not Found", from my home in the US.

However, I can reproduce the issue at e.g. this Netflix page for Moana (possibly only accessible in the US, not sure).

Anyway -- thanks for isolating the affected element, and for reaching out!

[dholbert]

(I can reproduce the issue in Edge 15, as well. That increases my confidence that we're correctly interpreting the spec here. I'm pretty sure our suggested fix will address this issue for Edge users, as well.)

Screenshot of Netflix's Moana page in Edge 15:

[dholbert]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=775263 on this issue in Chromium . Karl, you might want to reply to your partner-list post and mention this issue link, if they're curious. (The earlier Chromium incompatibility I mentioned was just one example of where Blink/WebKit don't match the spec on this sizing behavior -- but it's not the actual issue that's in play here, though.)

[adamopenweb]

Issue is still reproducible in Firefox 62 for MacOS.

[karlcow]

Recontacted them today.

[karlcow]

This has been fixed by netflix. Thanks!