adjust blur radius for HTML to match CanvasKit (#20840)

* adjust blur radius for HTML to match CanvasKit

* switch to new goldens for new blur radius logic

Author: flar

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 57327a39aba333794a092d4e72777bb37102f8ba
+revision: f1e5b87249f54998e23a34788e19ec864358e50b

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)';
 }