Bug 149935 – Unexplained 1px horizontal space between display:table-cell elements

• Component: Tables
• Status: RESOLVED FIXED

[Chris Rebert]

Created attachment 262712 [details]
OS X WebKit Nightly screenshot

To reproduce:
1. Open http://jsbin.com/yuwale/edit?html,css,output in WebKit Nightly on OS X

Expected result:
The left and right blue and red borders should be flush with each other (no space between them).

Actual result:
There is a 1px space between the left and right blue and red borders, indicating a space between the display:table-cell elements.
There does not seem to be any margin or padding CSS rule that would explain this extra 1px space.

This extra 1px space does not exist in any of the other major browsers (Firefox, Chrome, MS Edge).

[Chris Rebert]

Dangit, I meant http://jsbin.com/carilu/1/edit?html,css,output

[Chris Rebert]

Created attachment 262713 [details]
Copy of JS Bin example

[Chris Rebert]

Created attachment 262714 [details]
Chrome screenshot demonstrating expected behavior

[Chris Rebert]

We suspect this may be related to why Bootstrap input groups with a button on the left
have a double-wide horizontal border between the <button> and the <input> on Safari.
(The borders are instead supposed to overlap since we set a negative margin.)
Example: https://bootstrapdocs.com/v3.3.5/docs/components/#input-groups-buttons

[alan]

This is due to the integral space distribution between table cells vs. device pixel aligned drawing inside the cells (so we end up growing the cell more than needed and the pixelsnapped painting leaves gaps between the cells). If the input width is set to an integral value, the gap disappears.
 
This will probably fixed by bug 149366.

[alan]

It works on Chrome since they don't do (device)pixelsnapped painting while FF has non-integral cell space distribution.

[alan]

This is fixed by https://trac.webkit.org/changeset/191623 (non-integral table space distribution)

[Chris Rebert]

Do I need to worry about the other dependency, bug 150383, then?

[alan]

(In reply to comment #8)
> Do I need to worry about the other dependency, bug 150383, then?
Apparently not!

[alan]

(In reply to comment #9)
> (In reply to comment #8)
> > Do I need to worry about the other dependency, bug 150383, then?
> Apparently not!
I verified the linked test case on both retina and non-retina displays. We (r191623) render it the same as FF. (Chrome seems to be broken on non-retina though)

[Chris Rebert]

Wonderful! Thanks for the fix and the double-check.
I've removed this bug from Bootstrap's Wall (https://github.com/twbs/bootstrap/pull/18091 )
and will pass along your Chrome findings.

[alan]

(In reply to comment #11)
> Wonderful! Thanks for the fix and the double-check.
> I've removed this bug from Bootstrap's Wall
> (https://github.com/twbs/bootstrap/pull/18091 )
> and will pass along your Chrome findings.
Thanks for reporting it!