Re: [csswg-drafts] [css-values] Round to design grid module

Though I see the more full featured request which spawned this issue was closed for lack of use cases (https://github.com/w3c/csswg-drafts/issues/905), I am at least encountering sub-pixel issues all the time when trying to create responsive component styles. And they are becoming more and more of an issue if I want to actually utilize recent "wins" on the css unit front.

Not being able to coerce a rounded pixel value from things like this..
```css
--offset: calc(50vw * 0.2 / var(--count));
```
...often forces me to compute dimensions with javscript, adding hacky resize listeners and thrashing my layout, to then use `--offset` in meaningful ways where "hairline" alignments won't compound in situations like...
```css
position: sticky;
left: calc(var(--offset) * 2);
width: calc(100vw - (var(--offset) * 2));
scroll-snap-align: end;
```
Because sub-pixel values here can render the layout intensions futile.

#### Pretty sure that solving rounding would save a lot of headaches
- [#2114 - Border width rounding clarification](https://github.com/w3c/csswg-drafts/issues/2114/)
- [Google "sub-pixel rendering css"](www.google.com/search?q=sub-pixel+rendering+css&oq=sub-pixel+rendering+css)
- https://johnresig.com/blog/sub-pixel-problems-in-css/
- http://cruft.io/posts/percentage-calculations-in-ie/

I find the sub-pixel case as the most pertinent for a rounding solution, though the suggestion from @Crissov for all lengths sounds worthwhile. Especially when I think of `2dppx` screens and nearest `.5px` or creating elastic grid layouts where width/height "snap" to multiples of their gutter.

-- 
GitHub Notification of comment by jonjohnjohnson
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2513#issuecomment-384410520 using your GitHub account

Received on Wednesday, 25 April 2018 19:43:38 UTC