1159221 - tv-asahi.co.jp: width of display: table-cell element calculated larger than in Chrome

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

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

Attachment: ss-tv-asahi.png

1) Navigate to: http://www.tv-asahi.co.jp/sphone/
2) At the top right, you're supposed to see a "search" icon (magnifier glass) but it appears almost off-screen.
When scrolling down, you're supposed to see several arrows pointing right inside the grid - they are rendered almost outside of the grid.

This is caused by some width calculations in a CSS-based table. There is an (implied) row with three cells - markup is NAV DIV NAV. These cells have this CSS:

```.table-cell-wrap > * {
    vertical-align: middle;
    max-width: 1px;
    display: table-cell;
}```

The middle "cell" contains 

H1 
  A display:inline-block
    SPAN display:inline-block;width:114px

So this cell with the odd max-width of 1px and 114px wide content somehow still ends up pushing the subsequent cell almost off-screen.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Minimalish testcase showing the behavior difference would be useful....

Comment 2

[Daniel Holbert [:dholbert]]

Have a mostly-minimized testcase; will post shortly.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (mostly reduced)

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Hallvord R. M. Steen [:hallvors] from comment #0)
> These cells have
> this CSS:
> 
> ```.table-cell-wrap > * {
>     vertical-align: middle;
>     max-width: 1px;
>     display: table-cell;
> }```


The "max-width: 1px" is the problem here.

The second nav has a specified width (large enough for the magnifying glass), but that's getting clamped by this "max-width" declaration.

Not sure why that's not happening in Chrome.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (blue cell is wide in chrome, skinny in Firefox)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (blue cell is wide in chrome, skinny in Firefox)

(just fixing up some mismatched tags in testcase 2; doesn't affect rendering)

Comment 7

[Daniel Holbert [:dholbert]]

FWIW, IE11 and Opera 12.16 agree with our rendering here. (I tested the original website & 'testcase 2'.)  Safari 5.1 matches Chrome, unsurprisingly.  So, this is a case where WebKit (and its derivative, Blink) are doing their own weird thing with auto table layout, and differing from everyone else.  To the extend that there's a bug here, it's a WebKit/Blink bug, I think -- our behavior makes much more sense and has been independently implemented in 2 other engines. (Though automatic table layout is largely unspecified, so there may not be a single "right answer").

Anyway -- the right solution here is to reach out to the site and have them disable this "max-width:1" on these nav elements. I can fix it locally by adding this to their stylesheet, right after their existing ".table-cell-wrap > *" rule:

  .table-cell-wrap > nav {
    max-width: none;
  }

We should emphasize to them that this fixes brokenness in *all* non-WebKit/Blink browser engines -- IE, Firefox, and Opera w/ Presto.

Comment 8

[Daniel Holbert [:dholbert]]

I filed Blink & WebKit bugs on their behavior here (not clamping a table cell's specified "width" to its "max-width", when distributing space between table cells):
 http://code.google.com/p/chromium/issues/detail?id=482057
 https://bugs.webkit.org/show_bug.cgi?id=144338

Comment 9

[Daniel Holbert [:dholbert]]

Actually, comment 7 isn't quite what they want -- I just noticed it doesn't fix the issue with the little arrows being outside their containers (partway down the page).  That's the same underlying table-layout issue (with "max-width:1px"), but those arrows are <div>s instead of <nav>s, so the rule in comment 7 won't target those.

A more complete fix, which fixes those arrows as well, is as follows:

  .table-cell-wrap > nav, .table-cell-wrap > .arrow-cell {
    max-width: none;
  }

(There are likely better ways to rewrite their style to avoid this issue, too -- e.g. only applying "max-width:1px" where they actually want it, in a few places, to trigger ellipsizing.  My suggestion here is intended as a minimal intervention, to simply fix the breakage.)

Comment 10

[Noriatsu Kudo]

Mozilla Japan has contact, will contact them.

Comment 11

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

Was this site contacted?

Comment 12

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

(The problem is still there, although it's very subtle)

Comment 13

[Karl Dubost💡 :karlcow]

The site has been redesigned and seems to be working.