Closed Bug 1196255 Opened 4 years ago Closed 4 years ago

tabzilla invisible on mobile view of /privacy/tips/

Categories

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

Production
defect
Not set
minor

Tracking

(firefox40 unaffected, firefox41 unaffected, firefox42 affected, firefox43 affected)

RESOLVED FIXED
Tracking Status
firefox40 --- unaffected
firefox41 --- unaffected
firefox42 --- affected
firefox43 --- affected

People

(Reporter: jpetto, Assigned: kohei)

References

()

Details

(Keywords: dev-doc-complete, regression, site-compat, Whiteboard: [kb=1873526] )

Attachments

(5 files)

Tabzilla is invisible (white on white) on the mobile view of https://www.mozilla.org/privacy/tips/.
Whiteboard: [good first bug][kb=1827077]
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?
Flags: needinfo?(jon)
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.
Flags: needinfo?(jon)
Component: Pages & Content → Layout: Block and Inline
Product: www.mozilla.org → Core
Whiteboard: [good first bug][kb=1827077]
Version: Production → unspecified
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.
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/
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
Flags: needinfo?(dbaron)
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.
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.
Component: Layout: Block and Inline → Pages & Content
Flags: needinfo?(dbaron)
Product: Core → www.mozilla.org
Version: unspecified → Production
Attached file pull request
Sent a quick fix.
Assignee: nobody → kohei.yoshino
Status: NEW → ASSIGNED
Whiteboard: [kb=1873526]
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/
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.