display:table div with percentage width 1px bug

Question

The outer div have percentage width, and inner div's have display: tabel; width: 100%.

The inner div's show 1px less than outer div for some page widths while resizing. This adds an 1px line to the right.

https://jsfiddle.net/afelixj/utcswLp1/1/

Is there any fix for the bug?

Answer 1

This seems to be a specific webkit bug : https://bugs.webkit.org/show_bug.cgi?id=140371

The width of a display:table-* element is not always properly calculated when contained in a parent whose width is not defined with an absolute unit. You can see this issue in action here: Look at the right side of red elements

---

You can fix this issue in 2 different ways

1. You could define the width of parent element with an absolute unit or
2. You could apply display: table also to the container element. This doesn't really solve the bug but it should not be noticeable anymore (because it will affect also the parent element).

Answer 2

.wrap{
background: #000; 
height: 400px;
width: 60%;
display:inline-table;}

Just change your css code like this

Answer 3

Your problem arises from the "60%" width of the container.

Chrome truncates decimals (300.5px will become 300px).
Therefore, when the inner div is set to "100%", it is calculated at the rounded width of the parent div

So, let's say that the outer div is 300.5px (60% of total).
The inner div is calulculated as 100% of 300px;

Answer 4

@media screen and (-webkit-min-device-pixel-ratio:0) {
    width: calc(100% + 0.5px);
}

Notes:

• adding 1px doesn't fix the problem on WebKit … it just inverts it
• adding 0.5px introduces the problem on some non-WebKit browsers … wrapping it in a media query resolves this

Answer 5

Change your display:table to display:block.

Answer 6

I know this is rather late, but here's a fix for this bug i had to deal with too.

As mentioned in this thread the problem lies in the usage of percentage as a unit of width. The browser rounds the decimals down to a full number. So all we need to do is add 1 Pixel to the percentage based with. We can do that with calc:

width: calc(100% + 1px);

This will work in all major browsers exept IE 11 and older.

Answer 7

The use of display: table can come with the unwanted side effect that table css styles are applied on the div. Therefore I chose display: contents for my project.