Bug 140371 - elements with display:table and width:100% show 1px flickering if parent width uses non static unit
Summary: elements with display:table and width:100% show 1px flickering if parent widt...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P4 Minor
Assignee: Nobody
Depends on:
Reported: 2015-01-12 13:23 PST by Simone Rescio
Modified: 2020-11-28 11:17 PST (History)
3 users (show)

See Also:

CSS table 1px width flickering (1.19 MB, image/gif)
2015-01-12 13:23 PST, Simone Rescio
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Simone Rescio 2015-01-12 13:23:19 PST
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
Comment 1 Maxime Lapointe 2020-11-28 11:17:15 PST
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.


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

Any chance this could be looked at?