[Desktop] ScrollView content visible outside the scroll area.

[agneszitte]

Discussed in #18289

^{Originally posted by @mcNets September 24, 2024:}

Working in my last app I noticed that sometimes the content of a ScrollView or part of the content, in this case just the Border, is visible outside the scroll area.

I'm using a FeedView where the NormalTemplate has a GridView inside a ScrollView.

How to reproduce

Download the attached solution and execute the desktop project, then scroll up the content by clicking the small arrow at the bottom of the scrollbar. The card's border is visible outside the scroll area.

In my application it happens scrolling the content using the scrollbar no matter where, in this one, at least in my computer only by clicking the bottom arrow.

TestScrollView.zip

---

@agneszitte -> On my side, I am not able to reproduce the issue at all.

@Xiaoy312 Was able to reproduce the issue on his side.

Here are additional details for the repro steps for him:
repro: page-up/down, mouse wheel scroll
no-repro: dragging scrollbar, arrow-up/down

His comment:

The problem is related to the CornerRadius, if you remove the CornerRadius from MachinesItemNormalTemplate the issue is no longer reproducible.

Likely Skia-specific, we would need to review the implementation of BorderVisual with CornerRadius which is a skia-specific feature

@Xiaoy312 can reproduce the issue with Uno.Sdk 5.3.108 and also with Uno.Sdk 5.4.5 or latest 5.5.0-dev

[mcNets]

Is it because of this?

uno/src/Uno.UI.Composition/Composition/BorderVisual.skia.cs

Lines 173 to 185 in dc04707

	if (_backgroundBrush is { } && !_backgroundPathValid)
	{
	_backgroundPathValid = true;
	// We don't pass down <inner|outer>Area directly, since it contains the thickness offsets.
	// Instead, we only pass the Size (without the X and Y offsets).
	// The offsets shouldn't be part of the background path calculations, but should be done
	// at the point of rendering by translation the final output by the thickness.
	// This matters because if the path is for an image with a scaling RelativeTransform.
	// In that case, if you factor the thickness in the path itself (i.e. include it in SKPath.Bounds),
	// the shader will sample from the image after the offset is applied.
	// E.g., if we have a border with a 20px border thickness and 100x100 background area for an ImageBrush with a
	// RelativeTransform = ScaleTransform { ScaleX = 3, ScaleY = 3, CenterX = 0.5, CenterY = 0.5 }, here's what we want:
	// |-----------------300px---------------------|

[agneszitte]

@mcNets Can you confirm that you are still able to reproduce the issue 100% of the time with this sample app (by clicking the small down arrow of the scrollbar) even with the latest Uno.Sdk 5.4.5 please? (5.4 migration notes for info)

At the moment @Xiaoy312 is the only one that is able to reproduce the issue, but the repro is a little bit different (by using mouse wheel scroll).

[ramezgerges]

I can't repro at all on my side. It's extremely weird that different ways of scrolling affect the repro differently. The final vertical offset is all that should matter.

[mcNets]

@agneszitte yes I can. I updated to 5.4.5 and still happening. In fact in my actual project I'm on "Uno.Sdk": "5.5.0-dev.62".

It disappears when I set BorderThicknes=0 even if there is a CornerRadius > 0.

[agneszitte]

@agneszitte yes I can. I updated to 5.4.5 and still happening. In fact in my actual project I'm on "Uno.Sdk": "5.5.0-dev.62".

It disappears when I set BorderThicknes=0 even if there is a CornerRadius > 0.

Thank you a lot for the feedback @mcNets, we will continue to investigate (cc @jeromelaban for info)

[nickrandolph]

@agneszitte / @jeromelaban can we get this prioritised as it's affecting a lot of scenarios where scrolling happens. The workaround seems to be setting a background on the panel where the bleed through is showing but ideally this shouldn't be happening

[ramezgerges]

@nickrandolph We had trouble reproducing this when it was first opened. If you have an alternative repro, please post it as well, maybe it will be more reproducible.

[mcNets]

@nickrandolph @ramezgerges Here another minimum example built with 5.4.10. I used mouse wheel to scroll the content.

UnoScrollArea.mp4

UnoScrollArea.zip

[ramezgerges]

@mcNets Unfortunately, I still can't reproduce. (sidenote: I modified the uno.sdk version to 5.5.0-dev.90 because I already had it restored, but it won't matter.)

2024-10-22.19-53-10.mp4

Could you try setting the SkiaSharpVersion msbuild property to 3.0.0-preview.4.1? I discovered a few Linux-only skia bugs related to clipping a while ago and they were fixed in the skia version used in SkiaSharp 3. Maybe a similar bug is specific to your environment and is also fixed in SkiaSharp3.

[mcNets]

@ramezgerges 👍

By adding <SkiaSharpVersion>3.0.0-preview.4.1</SkiaSharpVersion> to the project it works fine with 5.4.10 and 5.5.0-dev.90

[agneszitte]

@ramezgerges what is left to be done for this issue please?

[ramezgerges]

@agneszitte What's left is moving Uno to SkiaSharp 3 :D