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

RESOLVED FIXED

Status

Tech Evangelism
Mobile
RESOLVED FIXED
3 years ago
a year ago

People

(Reporter: hallvors, Unassigned)

Tracking

Trunk

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [suggested fix in comment 9] , URL)

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

3 years ago
Created attachment 8598585 [details]
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.
Minimalish testcase showing the behavior difference would be useful....
Keywords: qawanted, testcase-wanted
Have a mostly-minimized testcase; will post shortly.
Keywords: qawanted, testcase-wanted
Created attachment 8598754 [details]
testcase 1 (mostly reduced)
Version: 29 Branch → Trunk
(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.
Created attachment 8598761 [details]
testcase 2 (blue cell is wide in chrome, skinny in Firefox)
Attachment #8598761 - Attachment description: testcase 2 → testcase 2 (blue cell is wide in chrome, skinny in Firefox)
Created attachment 8598770 [details]
testcase 2 (blue cell is wide in chrome, skinny in Firefox)

(just fixing up some mismatched tags in testcase 2; doesn't affect rendering)
Attachment #8598761 - Attachment is obsolete: true

Comment 7

3 years ago
see-comment-9
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.
Component: Layout → Mobile
Product: Core → Tech Evangelism
Whiteboard: [suggested fix in comment 7]
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
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.)
Whiteboard: [suggested fix in comment 7] → [suggested fix in comment 9]

Comment 10

3 years ago
Mozilla Japan has contact, will contact them.
(Reporter)

Comment 11

2 years ago
Was this site contacted?
Flags: needinfo?(kudo)
Whiteboard: [suggested fix in comment 9] → [suggested fix in comment 9]
(Reporter)

Comment 12

2 years ago
(The problem is still there, although it's very subtle)
The site has been redesigned and seems to be working.
Status: NEW → RESOLVED
Last Resolved: a year ago
Flags: needinfo?(kudo)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.