Skip to content
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

Closed
softvision-oana-arbuzov opened this issue Jun 7, 2017 · 5 comments
Closed
Labels
browser-firefox-mobile priority-critical sci-exclude Bugs to exclude from out Top Site Compat Index metrics type-GWS-interop Google properties interoperability testing type-GWS-interop-tracked Google properties interoperability testing
Milestone

Comments

@softvision-oana-arbuzov
Copy link
Member

softvision-oana-arbuzov commented Jun 7, 2017

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

  1. Navigate to: https://goo.gl/JBBtuw
  2. Observe image.

Expected Behavior:
Text is fully visible.

Actual Behavior:
Text is cropped.

Note:

  1. Reproducible also for music band “Albums” and “Songs” pages.
  2. Also reproducible for TV shows/programs ("Overview", "Episode", "Cast" pages) by navigating to https://goo.gl/aySj7y.
  3. Not reproducible on Chrome (Mobile) 58.0.3029.83.
  4. Screenshots attached.

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

sv; gs

Screenshot Description

textcroppedtvshow

From webcompat.com with ❤️

@softvision-oana-arbuzov softvision-oana-arbuzov changed the title goo.gl - text is not visible www.google.com – Text is cropped on “Music Band” page Jun 7, 2017
@karlcow
Copy link
Member

karlcow commented Jun 12, 2017

Let's see. It doesn't shock me.
I'm wondering if it's an issue with the CSS, or just a CSS rounding issue in Gecko. see
http://www.otsukare.info/2016/05/26/css-width-gecko

<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 16px

Screenshot Description

Also something surprising. While the height of the nesting block is 64px, the nested block is 65px.

@wisniewskit
Copy link
Member

@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).

@miketaylr miketaylr added the type-GWS-interop Google properties interoperability testing label Oct 25, 2017
@karlcow karlcow added this to the needsdiagnosis milestone Oct 30, 2017
@RByers RByers added the type-GWS-interop-tracked Google properties interoperability testing label Nov 29, 2017
@wisniewskit
Copy link
Member

wisniewskit commented Nov 30, 2017

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).

@wisniewskit
Copy link
Member

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.

@webcompat-bot webcompat-bot modified the milestones: contactready, duplicate Dec 7, 2017
@miketaylr miketaylr added the sci-exclude Bugs to exclude from out Top Site Compat Index metrics label Jun 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser-firefox-mobile priority-critical sci-exclude Bugs to exclude from out Top Site Compat Index metrics type-GWS-interop Google properties interoperability testing type-GWS-interop-tracked Google properties interoperability testing
Projects
None yet
Development

No branches or pull requests

6 participants