Vertical % or viewport sized units render a bit too small

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

[David Eads]

Hopefully I can describe this effectively:

For a recent project I made a stacked bar chart using pure CSS and percentage units. Each section of the bar has a percentage based height. All the sections heights add up to 100%. However, unless the container height is such that the percentage based heights map to an exact integer pixel size (e.g. 9% of 500px is 45px, but 9% of 380px is 34.199px), the total height of the boxes is consistently less than the total height of the container. I made a demo:

http://apps.npr.org/lookatthis/posts/publichousing-webkit-bug-demo/ (actual in-the-wild project here: http://apps.npr.org/lookatthis/posts/publichousing)

The percent heights add up to 100%, but the boxes themselves occupy a few pixels less than 100%.

The same behavior can be seen using viewport-relative units like vh.

I was able to replicate in Safari (OS X, iOS) and Chrome (on OS X, Android, iOS). It doesn't show up in Firefox.

[Benjamin Poulain]

It looks like percent sizes do not get subpixel layout.

There is a block of 380px split in 33%, 33%, 34%. The computed size of each block is 125px,  125px, 129px. It should ideally be 125.4, 124.4px, 129.2px.

Zalan would know why we don't get subpixel layout in that case.

[zalan]

Created attachment 243775 [details]
Test reduction.

[Ahmad Saleem]

I am not able to reproduce this bug using attached test reduction on STP173 and it matches Chrome Canary 117.

@Alan - I think we can close this, appreciate if you can confirm.