www.google.com – Time is cropped on “Popular times” graphic

[softvision-oana-arbuzov]

URL: https://google.com
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-06-09) - Chome UA
Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)
Problem type: Text is not visible

Steps to Reproduce

1. Navigate to: https://goo.gl/AEYj2R.
2. Scroll down to “Popular times” graphic.
3. Observe time displayed.

Expected Behavior:
Time is fully displayed.

Actual Behavior:
Time is cropped.

Note:

1. Not reproducible on Chrome (Mobile) 58.0.3029.83, on Firefox 53.0.2 Release and Firefox Nightly 55.0a1 (2017-06-05) without Chrome UA.
2. Screenshot attached.

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

sv; gs

From webcompat.com with ❤️

[karlcow]

The time is defined by

<div style="" class="i_NOYJDb5a6c-17AgC1q3TaA _epj">
    <div>
        <div class="_ipj">
            <div>6a</div>
        </div>
    </div>
    <div></div>
    <div></div>
    <div>
        <div class="_ipj">
            <div>9a</div>
        </div>
    </div>
    <div></div>
    <div></div>

<!-- cut for brevity -->
</div>

but there is a block for the full graphic.

which is defined by

<div class="_ppj i_NOYJDb5a6c-JjrbqILQZ8E" 
     data-ved="0ahUKEwiTlabcm8nUAhWBUrwKHVXxCE8QoWEIYTAN" 
     style="height: 135px;">

<!-- cut -->

</div>

and has a fixed height.

if I change the height to be 141px we can finally see the full block.
note also that the blocks for time are set with

._ipj {
	height: 18px;
	position: relative;
	-webkit-user-select: none;
	white-space: nowrap;
}

It's why the pink doesn't go full in the red outline and a combination of line-height.

all in all the design is not very robust depending on font-size etc.
And I'm not sure again we can do anything here on Gecko side.

setting as contactready but not really made for contact as of now.

[miketaylr]

setting as contactready but not really made for contact as of now.

@karlcow what would the suggested fix be in this case? It seems like an interop issue around font line-height? Or did I misunderstand.

[karlcow]

line-height: normal or 1.2 would fix the design in Firefox and breaks it in Chrome, because Roboto and Open Sans have different features. I need to write an article about this.
https://bugzilla.mozilla.org/show_bug.cgi?id=1392147

[wisniewskit]

While the symptom here seems slightly different (a line-height:normal or line-height:<number> value), it appears to be yet another case of the text-descender interop issues I made bug 1406552 to investigate. That issue may in turn be related to the ones in #8753.

There is also another case of usage of "Roboto-Regular" instead of "Roboto", which only further complicates the issue as Firefox mobile is likely selecting Clear Sans instead of Roboto, which is being investigated by Blink here.