752033 - Headers on Mobile Huffington Post render poorly

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Laura Mesa [:lmesa] [:lvmesa]]

Web page or screen you were on when you saw the issue: huffingtonpost.com

Steps to reproduce:
1. Go to huffingtonpost.com
2. Click on any link or tab to read more

What you expected: Clear photos and links in the content and headers, but instead they were blurry and pictures/headers hid links or copy, making it difficult to use. 

Crash report ID (if applicable):

Comment 1

[JP Rosevear [:jpr]]

I'm getting "corrupted content" errors trying to load this page right now.

Comment 2

[Aaron Train [:aaronmt]]

Sounds like they're sending a bad content-length or content-type maybe?

Comment 3

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: screenshot for you

From last night's build, a screenshot for you.

Comment 4

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Hi Laura, your screenshots do not show the blurry images, could you try it again with the latest aurora please?  I cannot reproduce this portion of the bug.

From what I see from the screenshot, the font overlapping should be the same bug as bug 707195.

Comment 5

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to Naoki Hirata :nhirata from comment #4)
> Hi Laura, your screenshots do not show the blurry images, could you try it
> again with the latest aurora please?  I cannot reproduce this portion of the
> bug.
> 
> From what I see from the screenshot, the font overlapping should be the same
> bug as bug 707195.

Hi Naoki--

The images are now clear (just downloaded the latest Aurora) and that portion seems to working fine.  Now its just the the image overlapping the font and the header being wonky.

Comment 6

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Hi Laura,  Thanks for the feedback, this helps out a lot.  I apologize for asking so many questions, but I would like to understand exactly what you are seeing:

1) The image overlaps the text? which device are you on?  Which device are you on?

2) The header being wonky... is that in regards to the text being all over each other?  If that's the case, then this portion of the bug would be a duplicate of bug 707195, so we can concentrate on the first part more so, I believe.

Comment 7

[Laura Mesa [:lmesa] [:lvmesa]]

I just downloaded the latest Aurora on my Samsung Glaxy S2 and I can't reproduce the graphics over the text:

What I had done was 
1. www.huffingtonpost.com/mobileweb/
2. click on "all stories"
3. click any story at random and see the heder text underneath the lead graphic in the header. 

After downloading the latest update this no longer happens--the headlines are no longer under the lead graphics.

Comment 8

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: another layout issue

The headers have improved, but saw that the arrow scroll keys are not being rendered properly.

Comment 9

[Brad Lassey [:blassey] (use needinfo?)]

This has a viewport meta tag so doesn't have font inflation at all. In fact it looks exactly the same in desktop firefox. 

So this is a core layout issue.

Comment 10

[Brad Lassey [:blassey] (use needinfo?)]

jet, can you had this out?

Comment 11

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: text under the header photo

Btw, I checked huffpost again yesterday with the Beta 2 and the header issue is back on my Samsung Galaxy S2.

Comment 12

[Timothy Nikkel (:tnikkel)]

Attachment: small testcase for difference in footer

This uses display: -webkit-box, so seems like it might be that they are only coding for webkit.

Comment 13

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

(In reply to Brad Lassey [:blassey] from comment #9)
> This has a viewport meta tag so doesn't have font inflation at all. In fact
> it looks exactly the same in desktop firefox. 

Removing connection to bug 707195 for the same reason.  (And no idea why it would appear connected anyway.)

Comment 14

[Jet Villegas (inactive)]

Attachment: testcase adds -moz-box but rendering still differs from -webkit-box

We appear to ignore width and height clamping for -moz-box. Need to check the spec on this prop and confirm correctness. We'll also want to reach out to the site authors re: -moz usage.

Comment 15

[Daniel Holbert [:dholbert]]

Attachment: further-reduced testcase

Here's a further-reduced version of Jet's reduced testcase, focusing just on the horintal sizing differences between Gecko & Webkit.

In Gecko, the wrapper block (w/ purple border) expands to the width of its contents (the large gray area) -- the wrapper's "width: 100px" is effectively ignored.

In Webkit, on the other hand, the "width: 100px" is honored -- the purple border is only 100px wide. (and the gray area sticks outside of it to the right)

If I add an unstyled <div> _around_ the <div class="wrapper">, then gecko changes to match the webkit rendering (and webkit's own rendering is unaffected)).

This might be indicative of a gecko bug -- I'm not sure.

Version info:
  Mozilla/5.0 (X11; Linux x86_64; rv:15.0) Gecko/15.0 Firefox/15.0a1
  Chromium: 18.0.1025.151 (Developer Build 130497 Linux)

Comment 16

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

-moz-box isn't related to any spec; it's XUL's box.

Comment 17

[Daniel Holbert [:dholbert]]

(Right -- to be clear, comment 15 isn't about any sort of spec-conformance -- just about whether we might be doing something unintentional)

Comment 18

[Jet Villegas (inactive)]

Given the findings here, this looks like something for Huffington Post to fix.

Comment 19

[Erin Lancaster [:elan]]

renoming.

Comment 20

[Mike Taylor [:miketaylr]]

Attachment: 2013-10-15 20.53.01.png

Comment 21

[Mike Taylor [:miketaylr]]

They have a new site design and we get working layout on m.huffpost.com. Closing as fixed.