Chrome Version: 69.0.3452.0 (Official Build) dev (64-bit)
OS: Win10, Ubuntu 18.04, Mac OS "High Sierra" (tested all three)
What steps will reproduce the problem?
(1) Visit https://jsfiddle.net/eh35yk7o/
(2) Look at the right edges of the blue boxes in the output.
(3) If you like: try zooming in and out.
What is the expected result?
No red should be visible.
What happens instead?
1px-wide red "seams" are visible at the right edge of some of the boxes. They change (i.e. different elements get them) at different zoom levels.
No seams should be present; the blue element has width:100%, so it should fill its container (which is the thing with the red background).
Notes:
- I think this is a pixel rounding issue - it seems to particularly happen when the parent has a fractional pixel value.
- The issue goes away if I remove "display:table", so this seems to be table-specific.
- No other browser exhibits this behavior as far as I've seen. I tested latest Firefox, Edge, and Safari, and didn't see any red in any of them.
- The use case where I ran into this was with tables inside of a flex container (which divides up free space & can easily create sizes with fractional pixels) -- here's my testcase for that (more complex than the one above): https://jsfiddle.net/rdkgsacx/
Comment 1 by dholb...@gmail.com
, Jun 21 2018