HuffingtonPost website not rendered correctly due to use of -webkit-box, -webkit-border-radius, and reliance on the WebKit bug with baselines of inline-blocks with overflow

RESOLVED WONTFIX

Status

RESOLVED WONTFIX
6 years ago
3 years ago

People

(Reporter: marco, Unassigned)

Tracking

Details

(Whiteboard: [webcompat], URL)

The mobile version of the HuffingtonPost website isn't rendered correctly on Firefox (http://www.huffingtonpost.it/mobileweb/).
In particular, the arrows to switch between news aren't rendered correctly.

Updated

6 years ago
Whiteboard: [webcompat]
This happens on desktop FF with UA agent spoofing. I inspected the various CSS / layout properties in Firebug and compared them to Chrome, and they all seem identical as far as I can tell. And yet the three <li> items show up as squares in FF vs circles in Chrome, and they render at different spots vertically.
Component: Graphics, Panning and Zooming → Layout
Product: Firefox for Android → Core
> and they all seem identical

You mean except for this bit, right?

  .scrollerNavWrapper .indicator > li {
    padding:0;margin:0;text-indent:-9999em;width:8px;height:8px;
    -webkit-border-radius:4px;background:#fff;overflow:hidden;
    margin-right:10px;display:inline-block;
  }

Note the -webkit-border-radius and lack of -moz-border-radius.  Also note the use of "overflow:hidden" on a "display:inline-block", which changes the baseline position per spec and in Gecko but does NOT change it in WebKit (which is not implementing anything resembling the spec here).

So at first glance, the vertical position and circle bits are entirely due to this one rule being WebKit-specific.

For the positioning of the '<' and '>', the relevant rule is on their parent:

  .scrollerNav{
    position:relative;width:320px;padding:14px 0px;height:13px;
    border-top:1px solid #ddd;display:-webkit-box;margin:0px auto;
  }

Note the 'display' value.
Assignee: nobody → italian
Component: Layout → Italian
Product: Core → Tech Evangelism
Summary: HuffingtonPost website not rendered correctly → HuffingtonPost website not rendered correctly due to use of -webkit-box, -webkit-border-radius, and reliance on the WebKit bug with baselines of inline-blocks with overflow
I've contacted their technical support, but they haven't replied so far.
(In reply to Boris Zbarsky (:bz) from comment #2)
> You mean except for this bit, right?
> 

Apparently my spot-the-differences skills need some work. Thanks for catching that :)
I don't see the arrows anymore, looks like they've modified their website.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → WONTFIX
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.