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

Status: VERIFIED WORKSFORME

(Web Compatibility :: Site Reports, defect, P5)

Description

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

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.

Comment 1

[Aaron Train [:aaronmt]]

Also seeing massive whitespace and awkward clipping when zooming on the page; tested on trunk 28

Comment 2

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

Attachment: tmp_Screenshot_2013-12-12-13-38-19-1162956996.png

Comment 3

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

dbaron, can we get an assignee?

Comment 4

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

Hard to pick an assignee without at least one of a regression window or a testcase.

Comment 5

[Flaviu Cos]

Could not find the regression range. The bug is reproducible even on 2012 builds.

Comment 6

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

(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

Comment 7

[Jet Villegas (inactive)]

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?

Comment 8

[Mats Palmgren (inactive)]

<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;".

Comment 9

[Mats Palmgren (inactive)]

Or rather "-moz-box-sizing:border-box;box-sizing:border-box;" since we will
remove the -moz- prefixed variant soon.

Comment 10

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

Why is there the difference between the way that Chrome renders this and the way that Firefox does?

Comment 11

[Mats Palmgren (inactive)]

Chrome on Linux gets a different style sheet than Firefox.  It has:
  box-sizing: border-box;
  width: 100%;
in the @media rule I mentioned.

Comment 12

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

(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?

Comment 13

[Mats Palmgren (inactive)]

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.

Comment 14

[Mats Palmgren (inactive)]

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.

Comment 15

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

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.

Comment 16

[Mike Taylor [:miketaylr]]

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%;}

Comment 17

[Adam Stevenson [:adamopenweb]]

The site is associated with TruMedia Networks. I reached out using the contact form.

Comment 18

[Adam Stevenson [:adamopenweb]]

Trying twitter.

Comment 19

[Hallvord R. M. Steen [:hallvors]]

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

Comment 20

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

filter on [mass-p5]

Comment 21

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

(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?

Comment 22

[Mats Palmgren (inactive)]

Site looks fine in FF33 on Linux.