Google weather precipitation chart is aligned differently in Firefox vs. other browsers, due to "display: -moz-box" being listed _after_ "display:flex;" in .wob_hw CSS rule (making firefox render the old janky style instead of new hotness)

RESOLVED FIXED

Status

Tech Evangelism Graveyard
English US
RESOLVED FIXED
4 years ago
3 years ago

People

(Reporter: cpeterson, Unassigned)

Tracking

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
Created attachment 8334579 [details]
Chrome_vs_Firefox_screenshot.png

STR:
1. Search Google for "weather": https://www.google.com/search?q=weather
2. In Google's weather widget, click the "Precipitation" button.

RESULT:
The blue bars displaying the change of rain are incorrectly aligned. Please see the attached screenshot of Chrome (left) vs Firefox (right). I don't think this is a Firefox regression.
I see this as well.  Looks like these elements are inside of a "display: flex" container.

I'm going to try to make a reduced testcase.
Created attachment 8334616 [details]
partially reduced testcase

Here's a partially reduced testcase. Firefox renders this in a "sawtooth" kind of way; Chrome has a single break in the blue line, before 70%.

I think this boils down to this chunk:
> #wob_pg .wob_hw,#wob_wg .wob_hw {
> [...]
>   display:flex;
>   display:-moz-box;

This makes that element "display: -moz-box" (old-style flexbox) in Gecko, but "display: flex" (new-style flexbox) in other rendering engines.

If I drop that -moz-box line from my testcase, Gecko renders the testcase correctly.
Yeah, I can fix this on the live site ( https://www.google.com/search?q=weather ) by editing the style rule to replace "display: -moz-box" (what we honor) with "display: flex" (what other rendering engines honor, because they reject "-moz-box").

Specifically, I can fix the page by doing this (in Nightly):
 1. Load https://www.google.com/search?q=weather . [Note broken sawtooth rendering]
 2. Right-click the first percentage number ("80%" for me), and choose "Inspect Element"
 3. In the HTML view that opens up, click the parent (with class="wob_hw")
 4. On the right side of our dev tools, click the "Rules" header-button.
 5. In the second rule listed, which has "display: -moz-box", click on the "-moz-box" to get an editable textfield, and replace "-moz-box" with "flex".

This immediately fixes the rendering.

(Note that our devtools apparently don't bother showing the "display: flex" declaration that's in the source, because it's completely overridden by the "display: -moz-box".  So you can't just uncheck that rule - you have to edit it.)
Hypothetically, if the page's moz-prefixed old-flexbox CSS produced the same rendering as its new-flexbox CSS, then there wouldn't be a problem here. But that CSS does not produce the same rendering, so we end up looking broken.

This is a Tech Evang issue. Google should be listing "display: -moz-box" *before* "display: flex" in the rule quoted in comment 2, so that old-flexbox is the "fallback" instead of the primary requested display type.
Assignee: nobody → english-us
Component: Layout → English US
Product: Core → Tech Evangelism
Summary: Google weather precipitation chart is incorrectly aligned → Google weather precipitation chart is aligned differently in Firefox vs. other browsers, due to "display:flex;" being listed _before_ "display: -moz-box" in .wob_hw CSS rule
So, we need to get the attention of someone who works on this chunk of CSS (for the weather UI in Google Search results).

CC'ing Tab (flexbox spec editor, Google employee, & stand-up guy). Tab, any chance you know such a person, or could get us one step closer to finding such a person?
Summary: Google weather precipitation chart is aligned differently in Firefox vs. other browsers, due to "display:flex;" being listed _before_ "display: -moz-box" in .wob_hw CSS rule → Google weather precipitation chart is aligned differently in Firefox vs. other browsers, due to "display:flex;" being listed _before_ "display: -moz-box" in .wob_hw CSS rule (making firefox render the old janky style instead of new hotness)
You can see the CSS in question by visiting https://www.google.com/search?q=weather , doing View Source, and searching the source for: 
  display:flex;display:-moz-box;

This has exactly one hit, which is the problematic CSS that need to have its ordering swapped.
Whiteboard: [fix needed from Google: swap ordering of "display:flex;display:-moz-box;" in CSS rule for #wob_pg .wob_hw]
Flags: needinfo?(jackalmage)
Summary: Google weather precipitation chart is aligned differently in Firefox vs. other browsers, due to "display:flex;" being listed _before_ "display: -moz-box" in .wob_hw CSS rule (making firefox render the old janky style instead of new hotness) → Google weather precipitation chart is aligned differently in Firefox vs. other browsers, due to "display: -moz-box" being listed _after_ "display:flex;" in .wob_hw CSS rule (making firefox render the old janky style instead of new hotness)
Daniel, mailing mozilla-google-discuss at mozilla dot org is also an option to get someone's attention....

Comment 8

4 years ago
(In reply to Daniel Holbert [:dholbert] from comment #5)
> So, we need to get the attention of someone who works on this chunk of CSS
> (for the weather UI in Google Search results).
> 
> CC'ing Tab (flexbox spec editor, Google employee, & stand-up guy). Tab, any
> chance you know such a person, or could get us one step closer to finding
> such a person?

I've submitted an internal bug on the relevant component, and linked over to this bug.

It's internal, so you can't see it, but I'll ping this bug with results.
Flags: needinfo?(jackalmage)
(In reply to Boris Zbarsky [:bz] from comment #7)
> Daniel, mailing mozilla-google-discuss at mozilla dot org is also an option
> to get someone's attention....

Thanks -- I'll do that next time, to avoid leaning on Tab too much. :)

(In reply to Tab Atkins Jr. from comment #8)
> I've submitted an internal bug on the relevant component, and linked over to
> this bug.
> 
> It's internal, so you can't see it, but I'll ping this bug with results.

Excellent, thanks!
(Reporter)

Comment 10

4 years ago
This is no longer a problem because Google has redesigned their weather chart.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME
Are you sure they redesigned it? The design still looks like the original screenshot to me.

The broken sawtooth rendering is indeed fixed, though, and the page source now contains:
====
#wob_pg .wob_hw,#wob_wg .wob_hw{-moz-box-orient:vertical;-moz-box-pack:justify;-moz-flex-pack:justify;align-items:center;flex-direction:column;justify-content:space-between;display:-moz-box;display:flex;
===
which is the chunk of style I mentioned in comment 2 -- except now with "moz-box" now listed *before* "flex", as suggested in comment 4 (which fixes this issue, per that comment).

So I think we can call this FIXED (rather than WFM) because the source changed in an identifiable specific way that fixed the issue.
Resolution: WORKSFORME → FIXED
Whiteboard: [fix needed from Google: swap ordering of "display:flex;display:-moz-box;" in CSS rule for #wob_pg .wob_hw]
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.