www.google.com - The Sports results are not aligned

[softvision-sergiulogigan]

URL: www.google.com Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-06-08) - Chrome UA Operating System: Google Pixel (Android 7.1.2) - 1080 x 1920 pixels (~441 ppi pixel density) Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: https://www.google.com/?gfe_rd=cr&gws_rd=ssl,cr&fg=1
2. Tap the Sports button. Observe the Featured scores card.

Expected Behavior: The Sports results are aligned.

Actual Behavior: The Sports results are not aligned.

Notes:

1. The issue is not reproducible on Chrome (Mobile) 58.0.3029.83.
2. Screenshot attached.

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

sv; gs

From webcompat.com with ❤️

[karlcow]

This needs to be tested at specific times. :) I'll try tomorrow morning

[karlcow]

I haven't been able to get a screen similar to the one of @softvision-sergiulogigan yet.

[karlcow]

I'm not sure I'm in the right time zone for this. I never get the right scores table.

[softvision-oana-arbuzov]

I was also able to reproduce the issue on "Sports>Latest" tab.

Tested with: Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-06-16) - Chrome UA Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)

[karlcow]

I'm not sure why, but maybe a question of timezone. I never get to that screen. Though it's 6pm right now on West coast.

or there is something else to configure. Like having preferences for sports, or being logged in. Not sure.

[karlcow]

@adamopenweb maybe you will have more chances than me. I never manage to reproduce the issue. most of the times I don't receive enough games.

[adamopenweb]

I might have to try this later on:

[karlcow]

yeah @adamopenweb I always get this kind of screen too. I wonder if @softvision-sergiulogigan has a specific configuration or following certain sports. If it's on a logged in profile or a blank configuration.

[karlcow]

ah… just hit me. @softvision-oana-arbuzov seems to point out that Today and Final are not aligned and it's the case too in @adamopenweb screenshot.

and now because it seems it is the season of swapping players. The sports button redirects to… news.

We might have to wait a bit for the games to restart

[softvision-sergiulogigan]

@karlcow exactly! Sorry if we weren't clear enough with the description. @adamopenweb the issue is reproducible (on our side) even after a Clear Data/Clear Cache action on Nightly (and then the Phony add-on installed).

[karlcow]

ok let's do that.

<jsl jstcache="562">
    <jsl style="display:none" jstcache="563"></jsl><span style="display:none" jstcache="564"></span>
    <jsl
        jssc="b1tma5Ey4Yo" jstcache="565"><span class="imspo_mtn__amt" jsan="7.imspo_mtn__amt"
            jstcache="568">Yesterday</span><span class="imspo_mtn__ft minispo-medium-font"
            jsan="7.imspo_mtn__ft,7.minispo-medium-font"
            jstcache="569">FT</span></jsl>
<jsl style="display:none"
    jstcache="566"></jsl>
</jsl>

Adding a

.imspo_mtn__amt {
    float: left;
}

will fix it. But we have a different behavior than Chrome on this one. I think I remember @dholbert telling me something about this aka float issues.

but maybe the more obvious thing to do here would be:

jsl {
    display: flex;
}

[karlcow]

Or more exactly

jsl.header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

with

<jsl jstcache="565" class="header" jssc="b1tma5Ey4Yo">
    <span class="imspo_mtn__amt" jsan="7.imspo_mtn__amt"
        jstcache="568">Yesterday</span>
    <span class="imspo_mtn__ft minispo-medium-font"
        jsan="7.imspo_mtn__ft,7.minispo-medium-font" 
        jstcache="569">FT</span>
</jsl>

The result is then:

Note that we can't ask Google to modify their code. As we are studying what would happen if we were receiving the tier1 version made for Chrome and/or doing user agent override.

[dholbert]

I wasn't immediately familiar with this incompatibility, but I reduced a testcase & determined that this is ~bug 1183365~ (or rather bug 488725 which I've now duped that bug to) -- a bad interaction between white-space: nowrap and float:right in this case.