1389957 - Jumbled top menu on www.nasa.gov

Status: NEW

(Core :: Graphics: Text, defect, P3)

Description

[inejge]

Attachment: Screenshot-2017-8-13 TRAPPIST-1 is Older Than Our Solar System.png

User Agent: Mozilla/5.0 (Windows NT 6.3; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170813100233

Steps to reproduce:

Opened https://www.nasa.gov/feature/jpl/trappist-1-is-older-than-our-solar-system


Actual results:

The top menu was incorrectly displayed.


Expected results:

The menu should have been displayed along the top of the page.

Comment 1

[inejge]

Attachment: The same page opened in IE11.

Comment 2

[Kohei Yoshino [:kohei]]

I cannot reproduce the issue. Please test with the Safe Mode: https://support.mozilla.org/kb/troubleshoot-firefox-issues-using-safe-mode

Comment 3

[Alice0775 White]

I can reproduce the problem on Windows10 Nightly57.0a1, but not on Firefox56.0b2 and Chrome60.

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=15104d2224f4d1c794994941e880d616cf9aa486&tochange=5baceaa01feee58e5dee795f9ef3bd2a596c8448

Via local build, regressed by:
67084d8fe886	Frédéric Wang — Bug 1193050 - Update OTS to latest upstream version. r=jfkthame


Setting gfx.downloadable_fonts.otl_validation = false fixes the problem (beta and release build default)

Comment 4

[Bas Schouten (:bas.schouten)]

Jonathan, you're probably the best person to come up with a way forward here.

Comment 5

[Jonathan Kew [:jfkthame]]

The immediate cause of the problem is that the downloadable font the site uses fails to load on Nightly. This is due to a bug in the font subsetter Google Fonts is using, which results in font resources that don't follow the OpenType spec correctly; see console messages such as:

downloadable font: Layout: DFLT script doesn't satisfy the spec. DefaultLangSys is NULL (font-family: "Titillium Web" style:normal weight:normal stretch:normal src index:2) source: https://fonts.gstatic.com/s/titilliumweb/v5/7XUFZ5tgS-tD6QamInJTceHuglUR2dhBxWD-q_ehMME.woff2

Their subsetting tool has apparently been fixed, but we are waiting for an updated version to be deployed so as to fix these issues.

(Note that on Beta and Release channels, we relax the OTS checking such that the font will not be rejected. Setting the pref gfx.downloadable_fonts.otl_validation to false on Nightly will achieve the same thing.)

It's also worth noting that the result (when the webfont fails to load) is particularly bad because the site's layout is quite fragile, and doesn't cope with significantly different metrics for the text in the top menu. For example, using the devtools Inspector to add

    #nasa-main-menu > li > a {
        letter-spacing: 2px;
    }

to the styles will result in a similarly broken layout even when the webfont is loaded. This suggests that the site will fail badly for users who need to override fonts/sizes, e.g. for accessibility reasons, as well as for people with webfonts disabled.

Comment 7

[Liz Henry (:lizzard) (relman/hg->git project)]

Andrei, can your team have a look to see if this is still reproducible in 60?
We may have fixed this elsewhere, already.

Comment 8

[Anca Soncutean, Desktop QA]

I tried to reproduce this bug with Firefox Nightly 57.0a1 (20170813100233) and Firefox Nightly 58.0a1 (20171004100049) on several stations under Windows 10 (x32 and x64), Windows 8.1 x64, macOs 10.13 and Mac Os 10.11, Ubuntu 16.04 x64 and Ubuntu 14.04 x64, but with no success. Therefore, unfortunately I can’t conclude if this issue is still reproducible in Firefox 60 builds. 

Inejge, could you please verify if this is still reproducing on your side using the following build:
https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/firefox-60.0a1.en-US.win32.zip (archive) or https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/firefox-60.0a1.en-US.win32.installer.exe (installer)?

Comment 9

[inejge]

Sorry for not noticing this earlier; the page renders correctly for me with 61.0a1 (20180318100058) on Win 8.1 32-bit.