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

Chris Rebert
Reported 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).
Attachments
OS X WebKit Nightly screenshot (5.99 KB, image/png)
2015-10-08 14:42 PDT, Chris Rebert 		no flags
Details
Copy of JS Bin example (701 bytes, text/html)
2015-10-08 14:45 PDT, Chris Rebert 		no flags
Details
Chrome screenshot demonstrating expected behavior (5.43 KB, image/png)
2015-10-08 14:47 PDT, Chris Rebert 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Chris Rebert
Comment 1 2015-10-08 14:44:08 PDT
Dangit, I meant http://jsbin.com/carilu/1/edit?html,css,output
Chris Rebert
Comment 2 2015-10-08 14:45:59 PDT
Created attachment 262713 [details] Copy of JS Bin example
Chris Rebert
Comment 3 2015-10-08 14:47:12 PDT
Created attachment 262714 [details] Chrome screenshot demonstrating expected behavior
Chris Rebert
Comment 4 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
zalan
Comment 5 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.
zalan
Comment 6 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.
zalan
Comment 7 2015-10-28 11:54:38 PDT
This is fixed by https://trac.webkit.org/changeset/191623 (non-integral table space distribution)
Chris Rebert
Comment 8 2015-10-28 12:04:10 PDT
Do I need to worry about the other dependency, bug 150383, then?
zalan
Comment 9 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!
zalan
Comment 10 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)
Chris Rebert
Comment 11 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.
zalan
Comment 12 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!
Note You need to log in before you can comment on or make changes to this bug.