www.msn.com – Layout is messed up on “Auto” page

[softvision-oana-arbuzov]

URL: http://www.msn.com/en-us/autos Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-06-19) Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density) Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://www.msn.com/en-us/autos.
2. Observe layout.

Expected Behavior: Layout is correctly displayed.

Actual Behavior: Layout is messed up (“Autos” text is misaligned on top bar, “Listings” dropw-down menus are not visible, “Powered by Autotrader” text is cropped).

Note:

1. Reproducible on Firefox 54.0 Release.
2. Not reproducible on Chrome (Mobile) 58.0.3029.83.
3. Screenshot attached.

Watchers: @softvision-sergiulogigan @softvision-oana-arbuzov

sv; country: in

From webcompat.com with ❤️

[wisniewskit]

I'm not sure what combination of factors is causing Firefox to render this header differently on Firefox compared to other browsers, but I've filed a reduced test-case to bug 1396047 to see if we can figure it out.

In the meantime, adding this CSS rule fixes this without breaking things on other browsers, so if MSN is willing to add it to their page's CSS then it should do the trick:

#header-common { white-space:nowrap; }

[adamopenweb]

This is similar to issue #2808, which @karlcow has reached out but I don't think we've received a response yet.

[karlcow]

<div class="head">
    <header id="header-common" role="banner" data-region="header" data-id="14" data-m="{&quot;i&quot;:14,&quot;n&quot;:&quot;header&quot;,&quot;y&quot;:6}">
        <button id="mobilemenu" class="caret menuburger" value="off"></button>
        <h1 class="h1">
  <a class="logo" aria-label="back to msn home" href="/en-us" data-id="15" data-m="{&quot;i&quot;:15,&quot;p&quot;:14,&quot;n&quot;:&quot;msnlogo&quot;,&quot;y&quot;:14,&quot;l&quot;:&quot;homepage&quot;,&quot;o&quot;:1}" tabindex="2">msn </a>
 <a aria-haspopup="true" class="vertical" href="/en-us/autos" data-id="16" data-m="{&quot;i&quot;:16,&quot;p&quot;:14,&quot;n&quot;:&quot;HeaderVerticalLink&quot;,&quot;y&quot;:14,&quot;l&quot;:&quot;autos&quot;,&quot;o&quot;:2}" tabindex="2">autos</a>

</h1>
        <ul>
…
        </ul>
    </header>
    <nav id="nav" role="navigation" data-region="megamenu_nav" data-id="30" data-m="{&quot;i&quot;:30,&quot;n&quot;:&quot;megamenu_nav&quot;,&quot;y&quot;:14}">
        <div class="navinner show-right">
            <button type="button" class="leftarrow"></button>
            <ul role="menubar" aria-label="Site Navigation" data-aop="lastcolumn" class="unselectable" style="transform: translateX(0px);">
…
            </ul>
            <ul class="mylink unselectable" role="menubar" aria-label="Site Navigation" data-aop="lastcolumn" style="transform: translateX(0px);">
            </ul>
            <button type="button" class="rightarrow"></button>
        </div>
    </nav>
</div>

[karlcow]

@adamopenweb is right. This is a duplicate of #2808

Trying to understand the blocks organization.

[karlcow]

Removing the display: inline-block fixes it.

#header-common > .h1 a, #header-common > .h1 > span, #header-common > h1 a, #header-common > h1 > span {
    color: #fff;
    /* display: inline-block; */
    vertical-align: middle;
}

[karlcow]

Duplicate of #2808

[ksy36]

The site layout has changed and the issue is no longer present.