New issue
Advanced search Search tips
Starred by 10 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 24
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac , Fuchsia
Pri: 2
Type: Bug



Sign in to add a comment
link

Issue 179006: box-shadow blur covers about half the expected distance

Reported by m...@scrambledbrains.net, Feb 28 2013

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.12 Safari/537.31

Example URL:
http://codepen.io/mcgwiz/pen/czBfj

Steps to reproduce the problem:
1. Load the repro URL in Firefox, Safari, and Chrome. Boxes 1 and 2 have the same 50px blur box-shadow applied, except 2's shadow is transposed 300px to the left. Around each shadow appears the parent's border, for reference. For box 1, it appears 25px from the edge of the box.

2. Observe incorrect blur rendering, only in Chrome.

What is the expected behavior?
In Firefox, the total color transition covers 115px. In Safari, it covers 96px. (Measured just by checking my screen's pixel values.)

Per the CSS Spec <http://www.w3.org/TR/css3-background/#the-box-shadow> the apparent color transition of the blur should cover an approximate distance of twice the blur radius. I.e., for blur radius B, the color transition should begins at about -B pixels from the box's given edge (accounting for spread and transposition), and should end at about +B pixels from that edge.

What went wrong?
In Chrome, it only covers 78px. Even then, that is generous, because the innermost 11px are a constant shade of #050505--not really a transition of color. So really, Chrome's color transition only covers 67px.

It appears either the blur radius was misinterpreted, or this is the result of the particular blur algorithm being used; if the latter is the case, this bug should then be interpreted to mean the algorithm does not meet the spec.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes Firefox 19, Safari 5

Chrome version: 26.0.1410.12  Channel: beta
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
 

Comment 1 Deleted

Comment 2 Deleted

Comment 3 Deleted

Comment 4 Deleted

Comment 5 by loic.nag...@gmail.com, Jun 27 2013

Observing the same behavior on OSX.

Comment 6 by fris...@jeka.info, Sep 25 2014

AFICT this is a clear bug in Chrome per CSS spec, same issue for text-shadow.

There was a spec clarification years ago, which is addressed by Mozilla since Firefox 4 in this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=590039

Blurring test is here:
http://test.csswg.org/suites/css3-background/nightly-unstable/html4/box-shadow-blur-definition-001.htm

See also:
http://dbaron.org/log/20110225-blur-radius

j.j.

Comment 7 Deleted

Comment 8 Deleted

Comment 9 by jan.boes...@incors.com, Feb 19 2015

Please also refer to section 4.12.4.2.19 in the HTML spec, where the precise algorithm for calculating a blurred shadow is explained:
https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-shadowblur

Comment 10 by senorblanco@chromium.org, Feb 19 2015

Cc: junov@chromium.org humper@chromium.org robertphillips@chromium.org
I believe this is due to the 1 / sqrt(3) fudge factor which we inherited from WebKit. IIRC, it used to be required by the spec, is still implemented in Skia, but was removed from the spec.

That code has moved around, but now appears to be in SkBlurMask::ConvertRadiusToSigma() in Skia.

Note that removing it will change visual results of many tests, and will affect performance (since we will be blurring more than we used to).

Comment 11 Deleted

Comment 12 by junov@chromium.org, Feb 21 2015

The specification referenced in comment #9 does not apply here. CSS shadows and Canvas 2D shadows follow separate specifications.

Comment 13 Deleted

Comment 14 Deleted

Comment 15 by fris...@jeka.info, Dec 22 2015

isn't "Status: Unconfirmed" wrong here?

Comment 16 by jan.boes...@incors.com, Dec 22 2015

Yes, it's wrong, this should be a confirmed bug. We have come to the conclusion that this issue has a very low priority, so we decided to use browser specific correction factors as a work-around.

Comment 17 by e...@chromium.org, Dec 29 2015

Labels: -Cr-Blink-Layout-BackgroundBorder Cr-Blink-CSS-Filters
Status: Untriaged

Comment 18 by junov@chromium.org, Dec 30 2015

Owner: xidac...@chromium.org
Status: Assigned

Comment 19 by xidac...@chromium.org, Jan 4 2016

This is due to the equations that we used.
Under SkBlurMask::ConvertRadiusToSigma, the equation is: sigma = 0.57735f * radius + 0.5f;

But in the SkiaUtils::skBlurRadiusToSigma, the equation is: sigma = 0.288675f * radius + 0.5f;

The example page likely goes through the code path of SkiaUtils::skBlurRadiusToSigma.

Comment 20 by tomhud...@chromium.org, Jan 4 2016

That explains our confusion on the Skia team, since platform/graphics/skia/SkiaUtils.h isn't part of third_party/skia/, or even skia/ext/.

Comment 21 by xidac...@chromium.org, Feb 1 2016

The change goes back to this CL: https://codereview.chromium.org/1008173003

In that CL, the equation of computing sigma from blur radius changed from 0.57735f * radius + 0.5f to 0.288675f * radius + 0.5f. 

Given that the new equation "0.288675f * radius + 0.5f" has been there for a long time, I think we probably should not change the equation back.

Comment 22 by junov@chromium.org, Feb 1 2016

Breaking backwards compatibility with ourselves can be okay if it makes us more compatible with other browsers (especially if we are talking about *all* other browsers).  Nonetheless, I have to admit that this sounds a bit scarry.

Comment 23 by senorblanco@chromium.org, Feb 1 2016

I believe we've been incompatible with the spec for some time, both in CSS and canvas. 
We should probably fix it for all web APIs rather than just for <canvas>, but it 
might be a good idea to give developers some warning, perhaps by an intent-to-
implement on blink-dev.

Comment 24 by junov@chromium.org, Feb 2 2016

Status: Archived
People are working around this, and fixing would likely break a lot of existing content. -> Archiving bug.

We can re-open when we have more compelling reasons to do so.

Comment 25 by fris...@jeka.info, Feb 2 2016

> People are working around this, and fixing would likely break a lot
> of existing content. -> Archiving bug.

?!

Will CSS filters inherit this bad legacy?
If yes, how can you justify a buggy brand new CSS property?

If not, how can you justify aberrations e.g. between
text-shadow, box-shadow and filter:drop-shadow()? 

(This feels like MS-nineties-arrogance "We have this bug - We like it - you know it - We change nothing")

Comment 26 by m...@scrambledbrains.net, Feb 3 2016

Reminded me of MSFT as well. Honestly shocked that the simple fact that there are workarounds is used as justification for not conforming to a clear spec. We're talking about a blur effect. "Break ... existing content"? The impact to publishers will be cosmetic at worst, while removing the need for annoying, frustrating, inconsistent hacks.

Please reconsider.

Comment 28 by phistuck@chromium.org, Nov 10 2016

Labels: Hotlist-Interop

Comment 29 by cavalcantii@chromium.org, Nov 10 2016

I can have a look on it.

Comment 30 by cavalcantii@chromium.org, Nov 10 2016

@xidachen: is it ok if I assign the issue to myself?

Comment 31 by cavalcantii@chromium.org, Nov 10 2016

Cc: -junov@chromium.org -robertphillips@chromium.org schenney@chromium.org fmalita@chromium.org

Comment 32 by xidac...@chromium.org, Nov 11 2016

Cc: junov@chromium.org xidac...@chromium.org
Owner: cavalcantii@chromium.org
As requested, assign the bug to cavalcantii@, thank you for taking it.

Comment 33 by cavalcantii@chromium.org, Nov 11 2016

Status: Assigned (was: Archived)

Comment 34 by rbyers@chromium.org, Nov 11 2016

I agree that interop with other browsers is more important than back-compat with Chrome, though we should be cautious to understand the risk.

I've attached some screenshots from browserstack.  The difference seems fairly subtle, I don't see an obvious reason why the compat risk would be substantial.  Can anyone provide an example of the sort of site they're worried about here?  Eg. I wonder if Firefox or Edge have ever gotten bug reports about sites that don't render as well there as a result developers expecting Chrome's behavior.

Anyway, unless I'm missing something, I think it would be OK to just treat this as a bug (no "intent" necessary), and just watch for reports of issues after it lands and re-evaluate if necessary.  Though a "web facing PSA" mail to blink-dev about the issue wouldn't hurt.
win10_ie_11.0.png
25.7 KB View Download
macelc_safari_9.1.png
40.2 KB View Download
win10_edge_13.0.png
23.0 KB View Download
win10_firefox_45.0.jpg
41.4 KB View Download
win10_chrome_50.0.png
34.1 KB View Download

Comment 35 by rbyers@chromium.org, Nov 11 2016

Whoops, I meant whether Firefox or _Safari_ have gotten reports of not matching Chrome.  It looks Edge/IE11 is even worse than Chrome, right?

Comment 36 Deleted

Comment 37 by f...@opera.com, Feb 13 2017

 Issue 620709  has been merged into this issue.

Comment 38 by schenney@chromium.org, Mar 6 2017

 Issue 140722  has been merged into this issue.

Comment 39 by suzyh@chromium.org, Apr 5 2017

Components: -Blink>CSS>Filters Blink>Compositing>Filters

Comment 40 by junov@chromium.org, Jul 25 2018

Cc: -junov@chromium.org

Comment 41 by bugdroid1@chromium.org, Dec 24

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/909793b85dd2eb0bd37954ec50fbc86d547be50a

commit 909793b85dd2eb0bd37954ec50fbc86d547be50a
Author: Florin Malita <fmalita@chromium.org>
Date: Mon Dec 24 16:03:22 2018

Update shadow blur-radius computations

According to both CSS [1] and Canvas2D [2], the implementation is expected
to perform a Gaussian blur with a standard deviation of half blur-radius.

(SVG wisely chose to define the shadow parameters directly in terms of
sigma [3])

Currently, for historical reasons, Blink uses a significantly smaller scale
factor when computing sigma: ~0.28 instead of 0.5 -- thus shadows in Blink
are about half the expected size.

This change updates the sigma computation to match specs, and aligns Blink's
shadow rendering with FF & WebKit.

Newly passing (manual) test:
http://test.csswg.org/suites/css3-background/nightly-unstable/html4/box-shadow-blur-definition-001.htm

[1] https://www.w3.org/TR/css-backgrounds-3/#shadow-blur
[2] https://html.spec.whatwg.org/multipage/canvas.html#when-shadows-are-drawn
[3] https://drafts.fxtf.org/filter-effects/#element-attrdef-fedropshadow-stddeviation

Bug:  179006 
Test: wpt/css/css-backgrounds/box-shadow/box-shadow-blur-definition-001.xht
Change-Id: Idb6e01f39f86bafa7b3c351bd1bff2f7f7ce1f92
Reviewed-on: https://chromium-review.googlesource.com/c/1377519
Commit-Queue: Florin Malita <fmalita@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618825}
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/renderer/core/style/shadow_data.cc
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/renderer/modules/canvas/canvas2d/canvas_rendering_context_2d_state.cc
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/renderer/platform/graphics/draw_looper_builder.cc
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/renderer/platform/graphics/skia/skia_utils.h
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/contents-opaque/overflow-hidden-child-layers-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/culling/scrolled-within-boxshadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/culling/translated-boxshadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/culling/unscrolled-within-boxshadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/geometry/foreground-layer-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/geometry/foreground-layer-expected.txt
[delete] https://crrev.com/7fd49d1f5087977e7da796441189394a9d0a014d/third_party/blink/web_tests/compositing/gestures/gesture-tapHighlight-with-box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/composited-parent-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/connect-compositing-iframe-delayed-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/connect-compositing-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/connect-compositing-iframe2-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/connect-compositing-iframe3-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/enter-compositing-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/iframe-resize-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/overlapped-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/iframes/scrolling-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/overflow/border-radius-above-composited-subframe-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/overflow/border-radius-composited-subframe-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/overflow/scrollbar-layer-placement-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/overflow/scrollbar-layer-placement-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/overflow/scrollbar-layer-placement-negative-z-index-child-positioned-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/compositing/overflow/scrollbar-layer-placement-negative-z-index-child-positioned-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/borders/border-radius-with-box-shadow-01-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/borders/border-radius-with-box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/box-shadow/box-shadow-clipped-slices-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/box-shadow/box-shadow-radius-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/box-shadow/scaled-box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/box-shadow/shadow-buffer-partial-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/box-shadow/shadow-tiling-artifact-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/box-shadow/single-pixel-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/canvas/canvas-scale-shadowBlur.html
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/canvas/canvas-scale-strokePath-shadow.html
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/canvas/canvas-transforms-fillRect-shadow.html
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/fast/css/box-shadow-and-border-radius-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/contents-opaque/overflow-hidden-child-layers-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/gestures/gesture-tapHighlight-with-box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/iframes/composited-parent-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/iframes/connect-compositing-iframe-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/iframes/connect-compositing-iframe2-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/iframes/connect-compositing-iframe3-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/masks/masked-ancestor-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/overflow/border-radius-above-composited-subframe-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/overflow/border-radius-composited-subframe-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/compositing/video/video-controls-layer-creation-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/fast/borders/border-radius-mask-canvas-with-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/fast/borders/border-radius-mask-video-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/paint/invalidation/box/box-shadow-add-repaint-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/paint/invalidation/box/box-shadow-change-repaint-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/paint/invalidation/transform/transform-replaced-shadows-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/virtual/scalefactor150/fast/hidpi/static/validation-bubble-appearance-hidpi-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/virtual/scalefactor200/fast/hidpi/static/validation-bubble-appearance-hidpi-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=CompositeAfterPaint/virtual/scalefactor200withzoom/fast/hidpi/static/validation-bubble-appearance-hidpi-expected.png
[delete] https://crrev.com/7fd49d1f5087977e7da796441189394a9d0a014d/third_party/blink/web_tests/flag-specific/enable-blink-features=LayoutNG/fast/box-shadow/box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=LayoutNG/fast/forms/validation-bubble-appearance-rtl-ui-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=LayoutNG/fast/writing-mode/english-lr-text-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/flag-specific/enable-blink-features=LayoutNG/ietestcenter/css3/text/textshadow-002-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/paint/invalidation/box/box-shadow-add-repaint-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/paint/invalidation/box/box-shadow-change-repaint-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/paint/invalidation/svg/repaint-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/paint/invalidation/transform/transform-replaced-shadows-expected.txt
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/paint/printing/print-box-shadow-expected.png
[add] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/android/fast/text/stroking-decorations-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/compositing/geometry/clipping-foreground-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/compositing/gestures/gesture-tapHighlight-with-box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/compositing/iframes/composited-iframe-alignment-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/compositing/masks/masked-ancestor-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/compositing/shadows/shadow-drawing-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/compositing/video/video-controls-layer-creation-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/custom-elements/form-validation-bubble-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/borders/border-radius-mask-canvas-with-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/borders/border-radius-mask-video-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/borders/border-radius-split-inline-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/box-shadow/basic-shadows-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/box-shadow/box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/box-shadow/box-shadow-transformed-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/box-shadow/inset-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/box-shadow/inset-subpixel-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/canvas/canvas-composite-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/canvas/canvas-composite-video-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/canvas/canvas-incremental-repaint-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/canvas/canvas-shadow-source-in-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/css/color-correction-on-box-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/css/color-correction-on-text-shadow-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/css/shadow-multiple-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/dom/HTMLMeterElement/meter-styles-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-ar-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-coarse-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-minimum-date-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-required-ar-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-required-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-ru-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-step-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/calendar-picker-appearance-zoom200-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/month-picker-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/month-picker-appearance-step-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/week-picker-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/calendar-picker/week-picker-appearance-step-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/color/color-suggestion-picker-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/color/color-suggestion-picker-appearance-zoom125-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/color/color-suggestion-picker-one-row-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/color/color-suggestion-picker-two-row-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/color/color-suggestion-picker-with-scrollbar-appearance-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/select/listbox-appearance-basic-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/select/menulist-appearance-basic-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/submit/submit-appearance-basic-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/text/text-appearance-basic-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/textarea/textarea-appearance-basic-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/validation-bubble-appearance-edge-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/validation-bubble-appearance-iframe-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/forms/validation-bubble-appearance-rtl-ui-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/overflow/overflow-of-video-outline-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/text/shadow-translucent-fill-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/text/stroking-decorations-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/text/stroking-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/fast/writing-mode/english-lr-text-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/http/tests/media/video-buffered-range-contains-currentTime-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/ietestcenter/css3/text/textshadow-001-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/ietestcenter/css3/text/textshadow-002-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/ietestcenter/css3/text/textshadow-003-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/ietestcenter/css3/text/textshadow-004-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/ietestcenter/css3/text/textshadow-010-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/audio-controls-rendering-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls-after-reload-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls-layout-direction-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls-strict-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls-styling-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls-styling-strict-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls-without-preload-expected.png
[modify] https://crrev.com/909793b85dd2eb0bd37954ec50fbc86d547be50a/third_party/blink/web_tests/platform/linux/media/controls/paint-controls-webkit-appearance-none-custom-bg-expected.png
[mod

Comment 42 by fmalita@chromium.org, Dec 24

Cc: -fmalita@chromium.org -humper@chromium.org cavalcantii@chromium.org
Labels: OS-Android OS-Chrome OS-Fuchsia OS-Linux OS-Mac
Owner: fmalita@chromium.org
Status: Fixed (was: Assigned)
Just landed a change to align with the spec.  Assuming it sticks, this should make it into M73.

https://www.chromestatus.com/feature/6569666117894144 should hopefully mitigate the surprise factor to some degree.

Comment 43 by fris...@jeka.info, Dec 25

Thanks for fixing this!

Is there a correction factor one can use to change blur values?
I assume it is ≈ 0,7 ?
(This was used to change shadows in Firefox UI when this change was made in Gecko 8 years ago)

browser, extension and web developers should know that value.

Comment 44 by fmalita@chromium.org, Dec 26

Previously

  σ = 0.288675 * R + 0.5

Now

  σ = 0.5 * R'

So the exact formula to preserve appearance through this change is

  R' = 2 * (0.288675 * R + 0.5)


But hopefully the answer is much simpler: use the same blur-radius as for FF/Safari, since the interpretation should be the same.

Comment 45 by fris...@jeka.info, Dec 30

Sure, but there is no Firefox to compare if one works on a large UI stylesheet for a Chrome-only extension or for a Chromium-based web browser.

So I did some tests and calculations and came to this rough list:

R' (new)  R (previously)
1.5px     1px
2px       2px
3px       3px
3px       4px
4px       5px
4.5px     6px

R' ≈ 0.7 * R       for R = 7px ... 12px
R' ≈ 0.6 * R       for R = 22px ... ∞

More precision seems pointless anyways.
What to do with small em-values is left as an exercise for the reader.


That said,
no web developer should be encouraged by this list to change any website because of that minor bugfix.

Sign in to add a comment