1288472 - Messed up "Find my Phone" layout on google.com

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Mike Taylor [:miketaylr]]

Attachment: Firefox 49 (left) vs Chrome Canary (right)

(This might be a tech evangelism issue, but starting here)

Note: toggling about:config?filter=layout.css.prefixes.webkit makes no difference.

STR: (this assumes you have an Android phone associated with a Google account)

1) Go to https://www.google.com/search?q=find+my+phone+android&ie=utf-8&oe=utf-8

Expected:
Layout looks like it does in Chrome

Actual:
Layout is wonky

Comment 1

[Mike Taylor [:miketaylr]]

Oh. There's a style:

.act-fmp-buttons {
    display: flex;
    display: -moz-box;
    display: -moz-flex;
    display: -moz-flexbox;
    line-height: 1.4;
    padding: 24px;
    text-align: center;
}

If I disable the -moz-box rule (allowing `display: flex` to do its thing), the layout looks just like Chrome.

Comment 2

[Mike Taylor [:miketaylr]]

Karl, can we ask Google to fix the order of prefixes (so unprefixed comes last)?

Comment 3

[Daniel Holbert [:dholbert]]

Really/better, they should just drop the prefixed "display" keywords here altogether. They do not help, and (in this case) they actively break the page.

In particular:
 * "display:-moz-box" is a XUL thing that they almost certainly haven't tested & do not want. (That's what's active in the screenshot that Mike attached here.)

 * "display:-moz-flex" has been unnecessary (and unrecognized) effect ever since we unprefixed in bug 801098 (Firefox 19, 4 years ago)  So, that's been unrecognized cruft for 4 years now. 
 * "display: -moz-flexbox" *has always* been unrecognized cruft -- we never shipped a build that recognized that as valid CSS.  (They're likely sending that style because "display:flexbox" was a very early spelling in the spec, and it's what IE shipped [prefixed] -- but the spec changed to "display:flex" before we landed our modern-flexbox-implementation, in bug 666041. So, we never shipped any code that recognized "-moz-flexbox".)

So: it'd be best to just ask that they drop all of the fallback CSS in that rule.

Comment 4

[Xidorn Quan [:xidorn] UTC+10]

Yeah, I think we should drop XUL-only values for web content.

Comment 5

[Xidorn Quan [:xidorn] UTC+10]

Oh, you said "they"... I think those should be dropped in our side as well. Is it expected to cause any compatibility issue to drop the XUL display values?

Comment 6

[Karl Dubost💡 :karlcow]

Xidorn, 
`XUL display` values should be safe I guess. I insist on display. 

I guess it's partly confusing because in the case of flexbox some examples use these properties
Such as https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex
but there are not really documented https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box


For others, such as appearance, it is currently used on Web pages (that said not all of them).
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

Comment 7

[Karl Dubost💡 :karlcow]

Contacted Google today.

Comment 8

[Mike Taylor [:miketaylr]]

This has been fixed, thanks Google!