Bug 149935

Summary: Unexplained 1px horizontal space between display:table-cell elements
Product: WebKit Reporter: Chris Rebert <webkit>
Component: TablesAssignee: zalan <zalan>
Status: RESOLVED FIXED    
Severity: Normal CC: simon.fraser, zalan
Priority: P2    
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
URL: http://jsbin.com/carilu/1/edit?html,css,output
Bug Depends on: 149366    
Bug Blocks: 159753    
Attachments:
Description Flags
OS X WebKit Nightly screenshot
none
Copy of JS Bin example
none
Chrome screenshot demonstrating expected behavior none

Description Chris Rebert 2015-10-08 14:42:43 PDT
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).
Comment 1 Chris Rebert 2015-10-08 14:44:08 PDT
Dangit, I meant http://jsbin.com/carilu/1/edit?html,css,output
Comment 2 Chris Rebert 2015-10-08 14:45:59 PDT
Created attachment 262713 [details]
Copy of JS Bin example
Comment 3 Chris Rebert 2015-10-08 14:47:12 PDT
Created attachment 262714 [details]
Chrome screenshot demonstrating expected behavior
Comment 4 Chris Rebert 2015-10-10 16:52:53 PDT
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
Comment 5 zalan 2015-10-10 19:55:34 PDT
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.
Comment 6 zalan 2015-10-10 19:57:40 PDT
It works on Chrome since they don't do (device)pixelsnapped painting while FF has non-integral cell space distribution.
Comment 7 zalan 2015-10-28 11:54:38 PDT
This is fixed by https://trac.webkit.org/changeset/191623 (non-integral table space distribution)
Comment 8 Chris Rebert 2015-10-28 12:04:10 PDT
Do I need to worry about the other dependency, bug 150383, then?
Comment 9 zalan 2015-10-28 12:28:26 PDT
(In reply to comment #8)
> Do I need to worry about the other dependency, bug 150383, then?
Apparently not!
Comment 10 zalan 2015-10-28 12:33:13 PDT
(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)
Comment 11 Chris Rebert 2015-10-28 13:11:55 PDT
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.
Comment 12 zalan 2015-10-28 13:23:47 PDT
(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!