www.google.com - "Speaker" icon is misaligned

[softvision-oana-arbuzov]

URL: https://www.google.com/?gfe_rd=cr&gws_rd=ssl,cr&fg=1

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

Problem type: Design is broken
Description: "Speaker" icon is misaligned

Steps to Reproduce:

1. Navigate to: https://www.google.com/?gfe_rd=cr&gws_rd=ssl,cr&fg=1.
2. Type in a string in the “Search” field (e.g. “test”).
3. Observe Speaker icon alignment.

Expected Behavior:
Speaker icon is centered.

Actual Behavior:
Speaker icon is misaligned.

Note:

1. Not reproducible on Chrome (Mobile) 59.0.3071.125, on Firefox 54.0.1 Release and Firefox Nightly 57.0a1 (2017-08-02) without Chrome UA.
2. Screenshot attached.

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

sv; gs

From webcompat.com with ❤️

[wisniewskit]

This is a tricky one, but via remote debugging I can see that Firefox and Chrome are using different fonts on my phone, and so the page's use of vertical-align:middle ends up aligning to a different font's x-height (Clear Sans vs Roboto). Moreover, they're also using line-height:normal, which seems to be end up using a different value in Firefox and Chrome. But when I set the line-heights and fonts to be the same values in the devtools, the rendering appears the same to me.

So technically this seems to be site error, since there's basically no expectation that browsers will ever select the same font or "normal" line-height. They should explicitly set values that will end up having the same x-height (same font, font-size, line-height, etc), or just use flexbox to vertically align instead.

[foolip]

The spec for line-height:normal is https://drafts.csswg.org/css2/visudet.html#propdef-line-height.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values says "Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family."

[karlcow]

I guess it partially falls into the bug https://bugzilla.mozilla.org/show_bug.cgi?id=1392147

[karlcow]

@foolip @wisniewskit let's make it a webcompat tip :) https://twitter.com/webcompat/status/918250862899691520

[lukebjerring]

Little HTML page to highlight normal v 1.2 v 1.2em:
http://jsbin.com/mevepoceha/edit?html,output

[wisniewskit]

I took one more look at this, to better summarize what's going wrong. This is the basic markup:

<div class="lr_dct_ent_ph">
  <span class="lr_dct_ph">
    <span>test</span>/
  </span>
  <span class="lr_dct_spkr lr_dct_spkr_off">
    <input src="data:image/png;base64,etc" type="image" width="14" height="14">
  </span>
</div>

The page attempts to use vertical-align:middle to align things, but incorrectly:

• the CSS font-family is invalid (Roboto-Regular instead of Roboto), so different fonts are chosen.
• line-height:normal is used instead of a definite height, meaning it will vary with the engine and font that's selected.
• the parent spans have varying heights.
• the parent span for the speaker has an uneven margin set on it (margin-top:0, margin-bottom:4px), presumably so the speaker image's bottom is better-aligned with the baseline of the /test/ text).

If I fix those four things (specify Roboto, specify parent span height=line-height=21px, specify the margin's top and bottom equally), then both browsers align the speaker properly.

As such I don't really consider this a webcompat issue so much as site error (relying on Blink-specific behavior), as relying on the non-engine-specific approach (matching heights/line-heights, even margins, vertical-align:middle) seems to work just fine.

That said, it does seem like there is interop work to be done with respect to line-height:normal. I just don't suspect that it's relevant to what the page is trying to achieve here.

[lukebjerring]

Tangential to the actual appearance, but technically https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height says the computed value should be normal, which is not the case in Firefox / Safari (have not checked Edge) (see JSBin above to reproduce)

[reinhart1010]

Google now have updated their site design, and the speaker button is aligned.

Tested in Firefox 66.0.5, Android 8.0 disguising as Chrome 73.

Closing this as fixed.

[softvision-oana-arbuzov]

Indeed I can no longer reproduce the issue.
Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-07-03)
Operating System: Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)