elements with display:table and width:100% show 1px flickering if parent width uses non static unit

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Simone Rescio]

Created attachment 244461 [details]
CSS table 1px width flickering

An element that uses a display value belonging to the "table" family, when seting width to 100% it won't honor randomly for 1px to fill the width of its parent, if the parent itself has a variable unit type as width,
this is noticeable especially in case of animations,

probably it's a subpixel rounding issue that happens only with table algorithm but not with any other display type,
same behavior happens on Blink as well

screencast of demo attached
code demo : http://codepen.io/srescio/pen/gbgXod

[Maxime Lapointe]

I don't believe the parent having a variable unit matters, or maybe not anymore. I tested this in chrome 84 and 87, on Windows, Ubuntu and MacOS

In my less awesome demo here. A table inside a div that has a fixed width doesn't take the full space either (Thats the green line below)

You can compare the width of the sibling div in red which takes the full space. They don't line up in Chrome.

https://jsfiddle.net/HellzStormer/7nbuqop5/15/

Note, if they do line up, that may be luck. Try zooming/unzooming.

Any chance this could be looked at?

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.