Content is overlapped & buttons are illegible, in Wall Street Journal article preview page

RESOLVED FIXED

Status

Tech Evangelism
Mobile
RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

Trunk
All
Android

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [mobile-compat-form] [country-us] [css] [contactready] [flexbox], URL)

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Site: http://m.wsj.com/articles/new-level-of-smartphone-encryption-alarms-law-enforcement-1411420341?mobile=y
Content is overlapped & buttons are illegible, in Wall Street Journal article preview page

:: Steps To Reproduce

1. Visit http://m.wsj.com/articles/new-level-of-smartphone-encryption-alarms-law-enforcement-1411420341?mobile=y
2. Inspect the header and the buttons below "To continue reading..."

:: Expected Result

Hamburger menu should be next to "THE WALL STREET JOURNAL" header-text. Colored stock indicator and "latest"/"popular" menus should be in a row, below that. The buttons below "To continue reading" should be legible - they say "Log In" & "Subscribe Now"

:: Actual Result

Hamburger menu is to upper-left of THE WALL STREET JOURNAL (instead of next to it). The stock-ticker / Latest / Popular header-items are in a vertical column, with the stock-ticker overlapping "The Wall Street Journal". The "Log In" / "Subscribe Now" buttons are illegible. (white text on white background) 

:: Additional Information

Software Version: 35.0a1
Device Information: Nexus 4. Reproduced on Linux Desktop as well. (No need for any UA tweaking, to trigger the bug in Firefox Desktop)
Reporter's User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0
(Reporter)

Updated

3 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Reporter)

Comment 1

3 years ago
This is due to "-webkit-box" styling, without proper CSS3 flexbox fallback. In Chrome, there are containers in the header with "display: -webkit-box" (e.g. <div class="nameplate module mastheadOps fxCard">, which is the parent of the hamburger-menu and the "THE WALL STREET JOURNAL" title)

Similarly, the buttons are in a "-webkit-box" container and each button is itself a -webkit-box; so they only get sized/rendered correctly in WebKit-derivative rendering engines.
(Reporter)

Comment 2

3 years ago
The stylesheet is
 http://sc.wsj.net/public/page/0_0_M0_1121-filterPageBy-I=%7bresponsiveDocumentation%7d-20140923.css


The illegible buttons are styled there with e.g. this style rule:

pseudoButton{font-family:HelveticaNeue-CondensedBold;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-flex:1;border:.15rem solid #333;border-radius:.5rem;background-image:-webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.47,#414141),color-stop(0.55,#5b5b5b),to(#5b5b5b));height:4rem;box-shadow:0 -.1rem .05rem #e5e5e5;}

(The "-webkit-gradient" there is why we don't end up rendering a background for these buttons.)
(Reporter)

Updated

3 years ago
Hardware: Other → All
Version: unspecified → Trunk
(Reporter)

Comment 3

3 years ago
Created attachment 8494272 [details]
screenshot of Firefox rendering
(Reporter)

Comment 4

3 years ago
Created attachment 8494273 [details]
screenshot of Chrome rendering
Whiteboard: [mobile-compat-form] → [mobile-compat-form] [country-us] [css] [contactready] [flexbox]

Updated

3 years ago
Depends on: 980572

Comment 5

2 years ago
fixed
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.