829937 - 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

Status: RESOLVED WONTFIX

(Tech Evangelism Graveyard :: Italian, defect)

Description

[Marco Castelluccio [:marco]]

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.

Comment 1

[Kartikaya Gupta (email:[e-mail])]

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.

Comment 2

[Boris Zbarsky [:bzbarsky]]

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

Comment 3

[Marco Castelluccio [:marco]]

I've contacted their technical support, but they haven't replied so far.

Comment 4

[Kartikaya Gupta (email:[e-mail])]

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

Comment 5

[Marco Castelluccio [:marco]]

I don't see the arrows anymore, looks like they've modified their website.