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

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

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

Comment 1

[Daniel Holbert [:dholbert]]

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.

Comment 2

[Daniel Holbert [:dholbert]]

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.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox rendering

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Chrome rendering

Comment 5

[Karl Dubost💡 :karlcow]

fixed