Closed Bug 752033 Opened 8 years ago Closed 6 years ago

Headers on Mobile Huffington Post render poorly

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set

Tracking

(blocking-fennec1.0 -)

RESOLVED FIXED
Tracking Status
blocking-fennec1.0 --- -

People

(Reporter: lmesa, Unassigned)

References

()

Details

(Whiteboard: [PMM] [Engagement] [layout])

Attachments

(7 files)

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):
Whiteboard: [PMM] [Engagement]
I'm getting "corrupted content" errors trying to load this page right now.
Sounds like they're sending a bad content-length or content-type maybe?
Attached image screenshot for you
From last night's build, a screenshot for you.
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.
Whiteboard: [PMM] [Engagement] → [PMM] [Engagement], font-inflation, readability
(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.
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.
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.
Attached image another layout issue
The headers have improved, but saw that the arrow scroll keys are not being rendered properly.
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.
No longer blocks: font-inflation
blocking-fennec1.0: --- → ?
Whiteboard: [PMM] [Engagement], font-inflation, readability → [PMM] [Engagement]
jet, can you had this out?
Assignee: nobody → jet
blocking-fennec1.0: ? → +
Btw, I checked huffpost again yesterday with the Beta 2 and the header issue is back on my Samsung Galaxy S2.
Attachment #625653 - Attachment mime type: text/plain → image/png
This uses display: -webkit-box, so seems like it might be that they are only coding for webkit.
(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.)
No longer blocks: 707195
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.
Assignee: jet → nobody
Component: General → Evangelism
QA Contact: general → evangelism
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)
-moz-box isn't related to any spec; it's XUL's box.
(Right -- to be clear, comment 15 isn't about any sort of spec-conformance -- just about whether we might be doing something unintentional)
Whiteboard: [PMM] [Engagement] → [PMM] [Engagement] [layout]
Given the findings here, this looks like something for Huffington Post to fix.
renoming.
blocking-fennec1.0: + → ?
blocking-fennec1.0: ? → -
Component: Evangelism → Mobile
Product: Firefox for Android → Tech Evangelism
Version: Trunk → unspecified
They have a new site design and we get working layout on m.huffpost.com. Closing as fixed.
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.