Intent to Prototype and Ship: Snap border, outline and column-rule widths before layout
Traian Captan
Contact emails
Explainer
Though not a formal explainer, Emilio has an excellent writeup of this issue at https://crisal.io/words/2020/06/13/rounding-borders.html.
Spec
With this change to blink, all implementations will agree, and this can be specified (see: https://github.com/w3c/csswg-drafts/issues/5210).
Summary
Snap border, outline and column-rule widths before layout to avoid gaps between backgrounds and borders caused by paint-time snapping. With this change, Blink will match Gecko and WebKit.
Blink component
Motivation
Currently Blink snaps the border widths at paint time. This can cause a visible 1px gap between a parent element's border and a child's background when the border is rounded down during paint since the snapping floors the value but the layout rounded it up to calculate the child’s s position (eg border-width is set to 10.75 pixels, rounded to 10px at paint time, but 11 at layout time). By making this change Blink will also behave like Gecko and WebKit and increase interoperability.
Search tags
border-width, outline-width, column-rule-width
TAG review
Skipping because this is a straightforward interop fix.
TAG review status
N/A
Risks
Interoperability and Compatibility
Gecko and WebKit already snap borders before layout.
This change would make Blink behave the same and increase interoperability and compatibility.
The explainer section has a link to a blog post describing the differences in more detail.
This issue and the proposed fix have been discussed in: Issue 1201762: [Task] Investigate border snapping before layout, which is currently blocking 10 issues.
This issue was also discussed on:
https://github.com/w3c/csswg-drafts/issues/2114
https://github.com/w3c/csswg-drafts/issues/5210
Gecko: Shipped/Shipping
WebKit: Shipped/Shipping
Web developers: Strongly positive - This has been reported in at least 10 separate bugs with a cumulative star count of 75.
Other signals:
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
No
Debuggability
N/A
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
New test will be added with the patch.
Flag name
Requires code in //chrome?
False
Tracking bug
Launch bug
Estimated milestones
M108
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
https://github.com/w3c/csswg-drafts/issues/5210
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/4651561863610368
This intent message was generated by Chrome Platform Status.
Mike Taylor
Contact emails
Explainer
Though not a formal explainer, Emilio has an excellent writeup of this issue at https://crisal.io/words/2020/06/13/rounding-borders.html.
Spec
With this change to blink, all implementations will agree, and this can be specified (see: https://github.com/w3c/csswg-drafts/issues/5210).
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFxahvsyqk3h2TZwDVJzb1KVgLjqmWDWMs3V9-1sZRA7pXkyOQ%40mail.gmail.com.
Chris Harrelson
On 9/28/22 3:01 PM, Traian Captan wrote:
Is there any current blocker to specifying this (besides someone doing the work)?Contact emails
Explainer
Though not a formal explainer, Emilio has an excellent writeup of this issue at https://crisal.io/words/2020/06/13/rounding-borders.html.
Spec
With this change to blink, all implementations will agree, and this can be specified (see: https://github.com/w3c/csswg-drafts/issues/5210).
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/addc5bee-3957-b9f7-9f41-a0a2a7802618%40chromium.org.
Philip Rogers
On Thu, Sep 29, 2022 at 12:15 PM Mike Taylor <mike...@chromium.org> wrote:On 9/28/22 3:01 PM, Traian Captan wrote:
Is there any current blocker to specifying this (besides someone doing the work)?Contact emails
Explainer
Though not a formal explainer, Emilio has an excellent writeup of this issue at https://crisal.io/words/2020/06/13/rounding-borders.html.
Spec
With this change to blink, all implementations will agree, and this can be specified (see: https://github.com/w3c/csswg-drafts/issues/5210).
Currently, the specs intentionally avoid specifying pixel-snapping behavior, and instead leave it up to engines to decide how they want to do it. Changing that would be a significant effort.
Philip Jägenstedt
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/40644a65-1656-497d-a19d-caad46855c64n%40chromium.org.
Yoav Weiss
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYeWLsmb0pvEmqOdvhEzaeFuUn-0vva2ofFH5Hn89zjV1g%40mail.gmail.com.