New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 769117 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Oct 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Problem rendering 1px dashed/dotted borders with border-radius

Reported by gilmoreo...@gmail.com, Sep 27 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Example URL:
https://jsbin.com/punoga

Steps to reproduce the problem:
1. Add a 1px border to any element, with a `border-style` of `dashed` or `dotted`
2. Add a `border-radius` value of anything greater than 1px

What is the expected behavior?
Border width should not be affected by border radius.

What went wrong?
The border appears as half the width it should be. This can be verified by magnifying the border on a high-dpi screen. On my MacBook Pro retina screen, the correct 1px border is 2 points wide, but the incorrect border is only 1 point wide. On a non-retina screen, the incorrect border appears as the same width but in a lighter colour.

A screenshot from my retina screen is at https://monosnap.com/file/FC543qyAVlq3kszpCU4kddITGnt6Ct.png

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes 58.0.3029.81

Does this work in other browsers? Yes

Chrome version: 60.0.3112.113  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

From what I can tell, this only happens in the following circumstances:

1. `border-style` is either `dashed` or `dotted` — any other style renders correctly.
2. `border-width` is `1px` — anything larger than 1px renders correctly.
3. `border-radius` is *larger* than `1px` — a `border-radius` value of `0` or `1px` renders correctly, but anything `2px` or larger shows the bug.

It happens on Windows and Mac. I've tested the following Chrome versions:

* 58.0.3029.81 (Windows) — no bug, works correctly.
* 59.0.3071.86 (Mac) — bug occurs.
* 60.0.3112.113 (Mac) — bug occurs.
* 61.0.3163.100 (Windows) — bug occurs.
* 63.0.3223.8 (Mac, canary build) — bug occurs.
 

Comment 1 by e...@chromium.org, Sep 27 2017

Components: -Blink Blink>Paint
Labels: Needs-Bisect
Paint team, have you made any changes to how borders are painted lately (in the 59 to 60 time frame)?
Labels: Needs-Milestone
Cc: sc00335...@techmahindra.com
Labels: -Type-Bug -Pri-2 -Needs-Bisect hasbisect-per-revision Triaged-ET M-63 OS-Linux OS-Windows Pri-1 Type-Bug-Regression
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce this issue with steps mentioned in comment#0 on reported version 60.0.3112.113 , on latest stable 61.0.3163.100 and on latest canary 63.0.3225.0 using Mac 10.12.6, Ubuntu 14.04 and Windows 10.

Manual Bisect Info:
===============
Good Build: 59.0.3032.0
Bad Build: 59.0.3033.0

You are probably looking for a change made after 454889 (known good), but no later than 454890 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/fe4abc21cb6a537fffdaa0d8695365f52a58a731..399f2e5e66b0ab059852ac7f1e82f334640c3b38

Review URL: https://codereview.chromium.org/2711983002

@schenney: Please confirm the bug and help in re-assigning to correct owner if it is not related to your change.

Thanks!!
It's my patch for sure. Apparently some zoom factor on thickness is missing.
Actually for zoom on linux it appears that we floor the border width when drawing path-based borders (for border radius) but round the width when drawing straight edge borders. Doesn't really explain the Retina problem though as that should be 2x zoom.

The color variation on non-DPI is probably just due to anti-aliasing differences, so not a bug.
And on Retina, at least, both borders disappear at 33%. I thought we never rounded down to zero now, but apparently I'm wrong.
Labels: M-59
The issue is that we paint the borders using 2 methods: the 1px border radius is not really a border radius at all, so we use lines to draw the border and we end up offsetting those by 1/2 a pixel and then Skia draws them fat. The 2px border radius is painted with a path and Skia draws that just 1 pixel wide as we request.

The first question is why the dpi setting is not applied. We should be drawing it at thickness 2 regardless in this situation, I thought. Or do we do that at playback now?

The second issue is that zooming the page produces all sorts of nasty artifacts. At 110% and 125% they display the same. Then they get out of sync again and the difference is very obvious.

One would be to ditch the special case line drawing code we have for rectangular border edges and always use paths. In fact, that might be the only fix.
Project Member

Comment 9 by bugdroid1@chromium.org, Oct 3 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d35d26b759f41fb3b6b302df45f63d012778813f

commit d35d26b759f41fb3b6b302df45f63d012778813f
Author: Stephen Chenney <schenney@chromium.org>
Date: Tue Oct 03 14:34:47 2017

Revert a change to stroke width with dashed borders

When https://codereview.chromium.org/2711983002 landed it included
an adjustment to the stroke width when drawing dashed borders using
miter clips. That caused borders on high dpi devices to appear
thinner with this code path than with the line-based code path.

R=fmalita@chromium.org

Bug:  769117 
Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: Ib40b7ca124d6a2581e0fd8954d43bc7f50672a4a
Reviewed-on: https://chromium-review.googlesource.com/693161
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#506033}
[delete] https://crrev.com/8c9dc0ca9554916db2e827607f3be8b3eceeb86d/third_party/WebKit/LayoutTests/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed01-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed02-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed03-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed04-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed05-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed06-expected.png
[add] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/dashed-1px-with-border-radius.html
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/fast/borders/dotted-border-ajoining-thick-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/linux/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[add] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/linux/fast/borders/dashed-1px-with-border-radius-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/linux/fast/box-shadow/inset-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/linux/fast/box-shadow/inset-subpixel-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/linux/ietestcenter/css3/bordersbackgrounds/border-radius-style-002-expected.png
[add] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/borders/dashed-1px-with-border-radius-expected.png
[add] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[add] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/fast/borders/dashed-1px-with-border-radius-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/fast/box-shadow/inset-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/fast/box-shadow/inset-subpixel-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/ietestcenter/css3/bordersbackgrounds/border-radius-style-002-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/mac/virtual/prefer_compositing_to_lcd_text/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[add] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/fast/borders/dashed-1px-with-border-radius-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/fast/box-shadow/inset-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/fast/box-shadow/inset-subpixel-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/ietestcenter/css3/bordersbackgrounds/border-radius-style-002-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/LayoutTests/platform/win/virtual/prefer_compositing_to_lcd_text/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/d35d26b759f41fb3b6b302df45f63d012778813f/third_party/WebKit/Source/core/paint/BoxBorderPainter.cpp

Status: Fixed (was: Assigned)
Borders now look correct in Canary 63.0.3232.0 — thanks for the quick turnaround!
Labels: Merge-Request-62
This is a very small fix to a rather annoying visual problem. I would like to merge to minimize the impact on users.
Project Member

Comment 13 by sheriffbot@chromium.org, Oct 4 2017

Labels: -Merge-Request-62 Merge-Review-62 Hotlist-Merge-Review
This bug requires manual review: We are only 12 days from stable.
Please contact the milestone owner if you have questions.
Owners: amineer@(Android), cmasso@(iOS), bhthompson@(ChromeOS), abdulsyed@(Desktop)

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Merge-Review-62 Merge-Approved-62
Approving merge to M62. Branch:3202
Project Member

Comment 15 by bugdroid1@chromium.org, Oct 5 2017

Labels: -merge-approved-62 merge-merged-3202
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/85ec7f3526f9d85428036c6b29987c60b792766f

commit 85ec7f3526f9d85428036c6b29987c60b792766f
Author: Stephen Chenney <schenney@chromium.org>
Date: Thu Oct 05 13:49:20 2017

Revert a change to stroke width with dashed borders

Merge to M-62 branch.

When https://codereview.chromium.org/2711983002 landed it included
an adjustment to the stroke width when drawing dashed borders using
miter clips. That caused borders on high dpi devices to appear
thinner with this code path than with the line-based code path.

TBR=pdr@chromium.org, schenney@chromium.org

(cherry picked from commit d35d26b759f41fb3b6b302df45f63d012778813f)

Bug:  769117 
Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: Ib40b7ca124d6a2581e0fd8954d43bc7f50672a4a
Reviewed-on: https://chromium-review.googlesource.com/693161
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#506033}
Reviewed-on: https://chromium-review.googlesource.com/702040
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/branch-heads/3202@{#590}
Cr-Branched-From: fa6a5d87adff761bc16afc5498c3f5944c1daa68-refs/heads/master@{#499098}
[delete] https://crrev.com/ee5e63a83581789ba33788df196e5b938254c2af/third_party/WebKit/LayoutTests/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed01-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed02-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed03-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed04-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed05-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/borderRadiusDashed06-expected.png
[add] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/dashed-1px-with-border-radius.html
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/fast/borders/dotted-border-ajoining-thick-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/linux/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[add] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/linux/fast/borders/dashed-1px-with-border-radius-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/linux/ietestcenter/css3/bordersbackgrounds/border-radius-style-002-expected.png
[add] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/borders/dashed-1px-with-border-radius-expected.png
[add] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/mac/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/mac/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[add] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/mac/fast/borders/dashed-1px-with-border-radius-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/mac/ietestcenter/css3/bordersbackgrounds/border-radius-style-002-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/mac/virtual/prefer_compositing_to_lcd_text/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/win/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/win/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[add] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/win/fast/borders/dashed-1px-with-border-radius-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/win/ietestcenter/css3/bordersbackgrounds/border-radius-style-002-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/LayoutTests/platform/win/virtual/prefer_compositing_to_lcd_text/compositing/overflow/border-radius-styles-with-composited-child-expected.png
[modify] https://crrev.com/85ec7f3526f9d85428036c6b29987c60b792766f/third_party/WebKit/Source/core/paint/BoxBorderPainter.cpp

Sign in to add a comment