From 1a76d53c41a0511fe3f39d0e398d1d1e3807fdc9 Mon Sep 17 00:00:00 2001 From: Jim Graham Date: Thu, 27 Aug 2020 17:58:26 -0700 Subject: [PATCH 1/2] adjust blur radius for HTML to match CanvasKit --- lib/web_ui/lib/src/engine/html/scene_builder.dart | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/web_ui/lib/src/engine/html/scene_builder.dart b/lib/web_ui/lib/src/engine/html/scene_builder.dart index 77a9197ca2d1e..1749fcb2101b0 100644 --- a/lib/web_ui/lib/src/engine/html/scene_builder.dart +++ b/lib/web_ui/lib/src/engine/html/scene_builder.dart @@ -563,9 +563,9 @@ class SurfaceSceneBuilder implements ui.SceneBuilder { } } -// TODO(yjbanov): in HTML the blur looks too aggressive. The current -// implementation was copied from the existing backdrop-filter -// but probably needs a revision. +// HTML only supports a single radius, but Flutter ImageFilter supports separate +// horizontal and vertical radii. The best approximation we can provide is to +// average the two radii together for a single compromise value. String _imageFilterToCss(EngineImageFilter filter) { - return 'blur(${math.max(filter.sigmaX, filter.sigmaY) * 2}px)'; + return 'blur(${(filter.sigmaX + filter.sigmaY) / 2}px)'; } From 69c6e01c0777442da4d1f88b21d46717a26e6faf Mon Sep 17 00:00:00 2001 From: Jim Graham Date: Thu, 3 Sep 2020 23:47:32 -0700 Subject: [PATCH 2/2] switch to new goldens for new blur radius logic --- lib/web_ui/dev/goldens_lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml index 0b8e6e25c74b5..be257b7de1965 100644 --- a/lib/web_ui/dev/goldens_lock.yaml +++ b/lib/web_ui/dev/goldens_lock.yaml @@ -1,2 +1,2 @@ repository: https://github.com/flutter/goldens.git -revision: 57327a39aba333794a092d4e72777bb37102f8ba +revision: f1e5b87249f54998e23a34788e19ec864358e50b