W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2017

Re: [csswg-drafts] [cssom-view] Layout dimension that divides+rounds+sums to value different to original dividend

From: Bevan via GitHub <sysbot+gh@w3.org>
Date: Thu, 13 Apr 2017 10:11:51 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-293849150-1492078309-sysbot+gh@w3.org>
The same issue exists with other more arbitrary divisions too.  E.g. 10px÷3 or 70px split into 3 columns of 3, 4 and 5 units in a 12-column grid (using e.g. flexbox).

Of course it also applies to `offsetHeight` in the vertical dimension where row heights are divisions of the height of the container.

I created more test cases for the 10px÷3 scenario;

- [Column widths](https://bevanr.github.io/5-and-5-is-9/thirds/width.html)
- [Row heights](https://bevanr.github.io/5-and-5-is-9/thirds/height.html)

I believe what Chrome does to determine which element to add or remove the additional pixel to/from is;

- round the left edge
- round the right edge
- make the width be the difference

(Safari and Chrome apply this to actual layout, shown by each column being different widths in the tests.  Chrome also applies it to `offsetWidth` and `offsetHeight`.  Safari does not, making the most incorrect browser for this unspecified behaviour; It reports the 4px row as 5px high in the row heights test case!)

Perhaps the solution is that `offsetHeight` and `offsetWidth` should be specified to be calculated in this way.

This doesn't require Firefox and Edge change their actual layout by requiring all elements have width and height dimensions that are integers.  And `offsetWidth` and `offsetHeight` would still be inconsistent with the actual layout (in Firefox and Edge only), because they still _must_ be integers.  This is no more or less broken than their current behaviour.  But at least offset dimensions would add to the sum of the container in _all_ browsers.  Also, Safari would then have to report what it is actually doing, and have the same behaviour as Chrome.

Website creators would then only need to deal with two different behaviours.

### Workaround

I've documented a workaround at https://github.com/BevanR/5-and-5-is-9/

-- 
GitHub Notification of comment by BevanR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1211#issuecomment-293849150 using your GitHub account
Received on Thursday, 13 April 2017 10:11:57 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:11 UTC