[web]:Canvaskit ClipRect not being clipped properly

[mariamhas]

The Maskfilter.blur(BlurStyle.outer, 10) is doing its thing in a ClipRect with a default hard edge (I tried other edges too). Sometimes at some scales and resolutions on devices/desktop/canvasKit the outer blur that the ClipRect should cut off is bleeding out, causing a hairline artefact red line to appear that should not be there. I don’t know exactly why, but I suspect some kind of rounding issue of the clipping algorithm.

This is what it looks like at a screen/device scale situation when it appears:

That hairline should never be visible if the ClipRect would correctly do what it is supposed to do. Alternatively it is the MaskFilter.blur(BlurStyle.outer, 10) that starts its outer blurring at some resolutions at the inner side already, preventing the ClipRect from cutting it away. Regardless of what is causing it, it should not happen and mostly it does not, but at some resolutions it does.

issue from @rydmike

[rydmike]

Thanks @mariamhas for opening the ClipRect issue based just on the rough eMail discussion of it.
Below is a more detailed presentation of it with reproducible code example as well.

---

Example of ClipRect Issue

TLDR

ClipRect does not always clip correctly, there are often thin remnants left of what it should clip away.

Applies to

All Flutter versions (past ones too), all channels and all platforms.
The issue is not just an issue with CanvasKit, as far as I have noticed it applies to all platforms, using SKIA rendering as well as DomCanvas.

Steps to reproduce

This Gist: https://gist.github.com/rydmike/0c6a2412cb3222a02e25cfead9ba8d29 show an example of the ClipRect issue.

The example Gist can also be tested live in DartPad here:
https://dartpad.dartlang.org/0c6a2412cb3222a02e25cfead9ba8d29

Detailed Information

The above mentioned MaskFilter.blur(BlurStyle.outer, 10) case was where I first noticed it, while using it on CustomPaint objects to create a blur effect on a custom paint outer edges. This filtering also caused a blur on the paint container's (canvas) outer edges, that I then needed to cut away with with ClipRect. I then noticed that the blur effects outside the container did not always get clipped.

As shown in this code snippet, we can equally well demonstrate this by just putting a surrounding BoxShadow on a Container and try to clip it away with a ClipRect. The situation is the same as the more involved case where I noticed it. Normally one would probably not put an outer BoxShadow on a Container and the clip it away again directly with a ClipRect, seldom any point in doing that, but it is a simple way to demo the issue with ClipRect. As mentioned, a more real use case is when drawing something and using e.g. the outer blur style, or something else that would cause an effect outside the used container that you then want to clip away fully.

Example case

With the provided code snippet a Container with a BoxShadow is presented. When the switch is flipped, the same Container is wrapped with a ClipRect. At some Container sizes and/or media (window) sizes, we can observe very thin remnants of the box shadow effect on "random" edges, that ClipRect should have clipped away completely. The used clipBehavior does not have any major impact on the end result.

With this example the Slider can be used to interactively change the size of the Container and observe how the remnants appear and disappear at various edges as the size is changed. The same behavior can also be observed to some extent on Desktop or Web when changing window (media) size.

Screenshot examples

In DartPad (WEB), before turning ClipRect on:

In DartPad (WEB) after turning ClipRect on:

On a device, after turning ClipRect on:

On Windows Desktop, before turning ClipRect on:

On Windows Desktop, after turning ClipRect on:

[yjbanov]

@liyuqian You are our expert on anit-aliasing in the presence of clipping and such. Can you please help us triage this? Given the differences in behavior across all platforms, what do you think is the solution here? In fact, what are the requirements? How should the engine behave?

[rydmike]

For the issue #58546 I made an example that also at the same time presents a use case where the ClipRect is not used to just clip away a box shadow that was put on it, but rather to cut away part of the filter effects that causes shadows to be painted also outside the container, that we then want/need to cut off for a real use case, but where the ClipRect sometimes fails.

The live version of this issue demo can be found here: https://rydmike.github.io/maskfilterskia/#/
The code in a Gist here: https://gist.github.com/rydmike/78cdff7f63515a9ea18f172b8640de55

The outer blur is here caused by Maskfliter.blur outer used on the custom paint wave painter.

We can try and see that also here turning on ClipRect fails to cut it away consistently, and the result varies with Container size. For some sizes it is gone completely, and for some sizes a remnant of it remains on one ore more sides randomly.

Findings summary

The issue and result above is of course the same as with the simple BoxShadow case. The ClipRect does not always completely cut off everything correctly that is drawn outside the container.

Alternatively shadows/blurs that should start on the outer side of the container at some sizes start their paint a bit inside the container. It smell a bit like some kind of rounding issue and/or consistency as to what is considered inside and outside of the container. Since the results vary with different container sizes and media sizes, it might also be rounding related from translation to device coordinates too. The difference could be as small as a >= versus > comparison at some critical rendering start/decision point.