1196255 - tabzilla invisible on mobile view of /privacy/tips/

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Jonathan Petto [:jpetto]]

Attachment: Screen Shot 2015-08-19 at 9.02.35 AM.png

Tabzilla is invisible (white on white) on the mobile view of https://www.mozilla.org/privacy/tips/.

Comment 1

[smithe]

What device/browser?  I can't replicate this on desktop FF or Chrome.  I can't replicate on android Chrome or FF either.  Any more info?

Comment 2

[Jonathan Petto [:jpetto]]

Hm, looks to be specific to Fx Developer Edition (42.0a2 2015-08-19) and Fx Nightly (43.0a1 2015-08-19). Will change bug component.

Comment 3

[Jonathan Petto [:jpetto]]

Attachment: Screen Shot 2015-08-19 at 5.37.32 PM.png

Initial investigation suggests an issue with negative top margin and overflow: hidden. Will work on creating minimal test case tomorrow if problem persists in next build.

Comment 4

[Kohei Yoshino [:kohei]]

Bug 451791 maybe.

Comment 5

[Kohei Yoshino [:kohei]]

42 goes beta today. We have to fix it in some way. Posted the site compatibility doc:

https://www.fxsitecompat.com/en-US/docs/2015/css-float-bugs-have-been-fixed/

Comment 6

[Alice0775 White]

Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=ed8935b903ed&tochange=c63a6810b2bb

Regressed by: c63a6810b2bb	L. David Baron — Bug 478834 - Record that we need to look for clearance if we encounter a block that might need to be pushed down for intersecting floats (i.e., one that establishes a BFC). r=roc

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: simplified testcase

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

For what it's worth, the problem on both the live site and the testcase also shows up in IE11.  It does not show up in Chromium or WebKit.

Also note that if I change the testcase to having only *one* class=clearafter div containing the float instead of *two*, then Chromium matches Gecko and IE.  (class=clearafter represents two different classes or IDs in the real site, though both using the same long #foo::after, #bar::after, ... selector.)

That, in turn, makes me inclined to think that the bug here is in Chromium and WebKit, since their behavior is so odd.  That said, I haven't thought through the testcase fully yet.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: slightly simpler reduced testcase

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I think our new behavior is correct.

I believe the production site was previously depending on one bug in Gecko and a different (maybe related, but I don't think so) bug in Chromium and WebKit, and was broken in IE.  We've now fixed the bug in Gecko.

I'll see about filing a Chromium bug.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Filed https://code.google.com/p/chromium/issues/detail?id=535381 .

Comment 12

[Kohei Yoshino [:kohei]]

Attachment: pull request

Sent a quick fix.

Comment 13

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/68570e93041fe7f81c4e6fb32bffb3c21e7b08ad
Fix Bug 1196255 - tabzilla invisible on mobile view of /privacy/tips/

https://github.com/mozilla/bedrock/commit/4f423f094eb397222daa6d879c527d81c12f0ca1
Merge pull request #3436 from kyoshino/bug-1196255-tabzilla-invisible

Fix Bug 1196255 - tabzilla invisible on mobile view of /privacy/tips/

Comment 14

[Chris Rebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=151926