www.gammonsdaily.com - text cut off on Gammon's daily

VERIFIED WORKSFORME

Status

Tech Evangelism
Mobile
P5
normal
VERIFIED WORKSFORME
4 years ago
2 years ago

People

(Reporter: blassey, Unassigned, Mentored)

Tracking

({reproducible})

unspecified
Other
Android
reproducible

Firefox Tracking Flags

(fennec+)

Details

(Whiteboard: [country-all][contactready], URL)

Attachments

(1 attachment)

http://www.gammonsdaily.com/peter-gammons-the-new-generation-of-shortstops/

I've seen this to some degree on every article. The right side of the text is cut off on a nexus 5.
Also seeing massive whitespace and awkward clipping when zooming on the page; tested on trunk 28
tracking-fennec: --- → ?
Keywords: reproducible
Summary: text cut if on Gammon's daily → text cut of on Gammon's daily
(Reporter)

Updated

4 years ago
Summary: text cut of on Gammon's daily → text cut off on Gammon's daily
Created attachment 8346676 [details]
tmp_Screenshot_2013-12-12-13-38-19-1162956996.png
dbaron, can we get an assignee?
tracking-fennec: ? → +
Flags: needinfo?(dbaron)
Keywords: regressionwindow-wanted
Keywords: testcase-wanted
Hard to pick an assignee without at least one of a regression window or a testcase.
Flags: needinfo?(dbaron)

Comment 5

4 years ago
Could not find the regression range. The bug is reproducible even on 2012 builds.
(In reply to David Baron [:dbaron] (needinfo? me) (UTC-5) from comment #4)
> Hard to pick an assignee without at least one of a regression window or a
> testcase.

test case is the url given
Flags: needinfo?(dbaron)

Comment 7

4 years ago
This isn't mobile-specific and can be seen by changing the desktop viewport width to < 800px. 

The problematic CSS appears to be a width setting at:
http://www.gammonsdaily.com/wp-content/themes/news/style.113.css#4931

Mats, can you take a look?
Flags: needinfo?(dbaron) → needinfo?(matspal)
<div id="content" class="hfeed"> has width:100% from the
"@media only screen and (max-width: 960px)" rule in
http://www.gammonsdaily.com/wp-content/themes/news/style.113.css

The same element has "padding: 25px 35px;" from the same file
(the #content rule on line 1624)

The sum of 100% and 2 times 35px will cause horizontal overflow.

The ancestor <div id="inner"> has "overflow:hidden" (from same
style sheet) and clips the overflow.

The site could fix it by adding "padding: 25px 0;" in the @media rule,
or perhaps better, add "-moz-box-sizing:border-box;".
Assignee: nobody → english-us
Component: General → English US
Flags: needinfo?(matspal)
Product: Firefox for Android → Tech Evangelism
Summary: text cut off on Gammon's daily → www.gammonsdaily.com - text cut off on Gammon's daily
Or rather "-moz-box-sizing:border-box;box-sizing:border-box;" since we will
remove the -moz- prefixed variant soon.
Why is there the difference between the way that Chrome renders this and the way that Firefox does?
Chrome on Linux gets a different style sheet than Firefox.  It has:
  box-sizing: border-box;
  width: 100%;
in the @media rule I mentioned.
(In reply to Mats Palmgren (:mats) from comment #11)
> Chrome on Linux gets a different style sheet than Firefox.  It has:
>   box-sizing: border-box;
>   width: 100%;
> in the @media rule I mentioned.

So is this an evangelism bug? Or is this something we can fix in gecko?
There's nothing to fix, because we render the page as they requested.
If they had "box-sizing: border-box" in the rule also for Firefox
then we could fix it by dropping the -moz- prefix on box-sizing
(bug 243412), but they *don't*.  So adding "-moz-box-sizing:border-box;
box-sizing:border-box;" seems the way to go here.  Then they can drop
the -moz- prefixed part in a few years when the Firefox user base is
saturated with a version that implements the unprefixed property.
Oops, now that I look at the style sheet source I see that they have
"box-sizing: border-box;" there, so yeah, we could fix this by fixing
bug 243412.  It'll take a while before that reaches all our users
though, so I'd still recommend the site to add the prefixed version.
Depends on: 243412
Although not mobile-specific, it is hit much more frequently on mobile devices and the mobile tech evangelism component is more well owned so I'm moving it there.
Assignee: english-us → nobody
Component: English US → Mobile
To be more clear, we should reach out to gammonsdaily and ask that they update the following rule (from http://www.gammonsdaily.com/wp-content/themes/news/style.113.css) to include -moz-box-sizing:border-box;

(inside @media only screen and (max-width: 960px) {}):

.archive-page,.content-sidebar #content,.content-sidebar #content-sidebar-wrap,.content-sidebar-sidebar #content,.content-sidebar-sidebar #content-sidebar-wrap,.footer-widgets-1,.footer-widgets-2,.footer-widgets-3,.full-width-content.news-landing #content,.full-width-content #content,.full-width-content #content-sidebar-wrap,.home-middle-left,.home-middle-right,.home.news.content-sidebar #content,.news-landing .wrap,.sidebar,.sidebar-content #content,.sidebar-content #content-sidebar-wrap,.sidebar-sidebar-content #content-sidebar-wrap,.sidebar-content-sidebar #content,.sidebar-sidebar-content #content,#content-sidebar-wrap,#footer,#header,#home-bottom,#home-middle,#home-top,#sidebar-alt {box-sizing: border-box;width: 100%;}

-->.archive-page,... {-moz-box-sizing: border-box; box-sizing: border-box;width: 100%;}
Whiteboard: [country-all][contactready]
The site is associated with TruMedia Networks. I reached out using the contact form.
Assignee: nobody → astevenson
Status: NEW → ASSIGNED
Whiteboard: [country-all][contactready] → [country-all][sitewait]
Trying twitter.
(IMHO this is low-pri - we should rather move faster dropping the prefix than ask sites to add something that will be relevant for perhaps only a year or so..)
Assignee: astevenson → nobody
Status: ASSIGNED → NEW
Whiteboard: [country-all][sitewait] → [country-all][contactready][mentor=astevenson]

Updated

3 years ago
Mentor: astevenson@mozilla.com
Whiteboard: [country-all][contactready][mentor=astevenson] → [country-all][contactready]
filter on [mass-p5]
Priority: -- → P5
(In reply to Mats Palmgren (:mats) from comment #14)
> Oops, now that I look at the style sheet source I see that they have
> "box-sizing: border-box;" there, so yeah, we could fix this by fixing
> bug 243412.  It'll take a while before that reaches all our users
> though, so I'd still recommend the site to add the prefixed version.

That happened a while ago, so presumably this is fixed now?
Site looks fine in FF33 on Linux.
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WORKSFORME
Status: RESOLVED → VERIFIED
Keywords: regressionwindow-wanted, testcase-wanted
You need to log in before you can comment on or make changes to this bug.