-
Notifications
You must be signed in to change notification settings - Fork 68
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
www.google.com – Text is cropped on “Music Band” page #7292
Comments
Let's see. It doesn't shock me. <div class="g_r g_a" style="line-height: 64px; margin-top: 0px;"
tabindex="0" role="link">
<div class="g_a o_gi_gj" style="height: 64px; line-height: 64px;"
role="presentation">
<div class="g_a o_gi_gm" style="padding-right: 88px; max-height: 65px;"
role="presentation">
<div class="g_a o_gi_gn" role="presentation"
style="max-height: 16px;">Duluth, GA, United States</div>
<div class="g_k o_gc g_a o_gi_go"
style="max-height: 16px;"><span class="g_a">Infinite Energy Center</span></div>
</div>
<div class="g_a o_gi_gl" style="padding-right: 24px; width: 112px; max-height: 65px;"
role="presentation">
<div class="g_a o_gi_gp" role="presentation">
<div class="g_a g_k o_gi_gq">Wed, Oct 11</div>
<div class="g_a g_k o_gi_gr">7:00 PM</div>
</div>
</div>
</div>
</div> if I artificially increased the font in .o_gi_gj {
color: rgba(0,0,0,0.87);
font-size: 14px;
line-height: 64px;
} I can visualize the issue better. And it's possible to reproduce also on Desktop with responsive mode and chrome ua. Let' say I put the font-size to Also something surprising. While the height of the nesting block is |
@karlcow, @softvision-oana-arbuzov, do you still see this issue on your end? I can't see it on my phone or tablet, though I do see another problem: I can't click on "episodes" or "cast" at all (I suspect that's probably the same problem I'm seeing now in #7299, though). |
I am still able to reproduce the issue.
Tested with: |
This appears to be because they are using the CSS font-family "Roboto-Regular" instead of just "Roboto". Firefox is falling back on Clear Sans as a result, and if I change to "Roboto" then things seem to be working. As such, this is just a design that relies on specific font metrics, and relies on a Blink-specific convention for finding fonts by name. Either Firefox will have to adopt that convention, or find another way to deal with Roboto vs Clear Sans issues, or Google can just change their CSS to fall back on "Roboto" after "Roboto-Regular" (or serve it as a webfont if they'd prefer). Edit: I've filed bug 1422138 to see if Firefox can't adopt support for that font naming convention, at least on Android. That might be the easiest way to go. Edit 2: no, it turns out that supporting "Roboto-Regular" is a known Blink bug that has recently been acknowledged. It would be best to reach out to Google to correct this by not using the Postscript name "Roboto-Regular", but just using "Roboto" (or to use a web font if need be). |
Just a quick update: the Blink team is willing to run metrics to determine if abuse of the Blink "Roboto-Regular" font-matching quirk is too widespread to make it worth changing Google Search alone. If that proves to be the case, we'll have to spec that behavior and it will need to be added to other engines. There is also a good chance that this is affected by the font-alignment interop differences being investigated in bug 1406552. As such, I'm going to mark this as a dupe of #8753, as that is already about these two issues. |
URL: https://goo.gl/JBBtuw
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-06-06) - Chrome UA
Operating System: Samsung Galaxy S6 (Android 7.0) - Resolution 1440 x 2560 pixels (~577 ppi pixel density)
Problem type: Text is not visible
Steps to Reproduce
Expected Behavior:
Text is fully visible.
Actual Behavior:
Text is cropped.
Note:
Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov
sv; gs
From webcompat.com with ❤️
The text was updated successfully, but these errors were encountered: