Webview overlays scroll bars in a scroll viewer

[tomhornyak]

Here is a picture of the problem. The green square in the bottom is the Webview. Note the rectangles and textboxes don't

Here is the .axmal code

<Window xmlns="https://github.com/avaloniaui"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		xmlns:web="clr-namespace:Avalonia.Controls;assembly=Avalonia.Controls.WebView"
		mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
		Width="500" Height="500"
		x:Class="CanvasTest3.MainWindow">

	<Grid>
		<ScrollViewer AllowAutoHide="False"
					  HorizontalScrollBarVisibility="Visible"
					  VerticalScrollBarVisibility="Visible">
			<Canvas Background="LightGray" Width="2000" Height="2000">
				<Rectangle Fill="Green" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50"/>
				<Rectangle Fill="Red" Width="100" Height="100" Canvas.Left="155" Canvas.Top="50"/>
				<Rectangle Fill="Blue" Width="100" Height="100" Canvas.Left="260" Canvas.Top="50"/>
				<Rectangle Fill="Pink" Width="100" Height="100" Canvas.Left="365" Canvas.Top="50"/>
				<Rectangle Fill="Yellow" Width="100" Height="100" Canvas.Left="470" Canvas.Top="50"/>
				<Rectangle Fill="Purple" Width="100" Height="100" Canvas.Left="575" Canvas.Top="50"/>
				<Rectangle Fill="Orange" Width="100" Height="100" Canvas.Left="680" Canvas.Top="50"/>
				<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
						   TextWrapping="Wrap" Width="400" Canvas.Left="555" Canvas.Top="150"/>
				<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
						   TextWrapping="Wrap" Width="400" Canvas.Left="150" Canvas.Top="150"/>
				<web:NativeWebView Name="theRtb" Width="400" Height="400" Canvas.Left="300" Canvas.Top="300" Background="LightGreen"/>
			</Canvas>
		</ScrollViewer>
	</Grid>
</Window>

[maxkatz6]

Airspace problem is pretty much natural with NativeWebView. There are some experiments with offscreen rendering into a bitmap/texture, but it's slower and less stable. One way to deal with it is to always resize/crop native view to the boundaries of what is visible right now.

[tomhornyak]

After 4 days of pounding my head against the keyboard, I got a solution, sort of. Clipping web view did not work for me. So I created a custom behavior to adjust the height and width of the web view if it hits the scroll bar and adjusts back when it i not under the scroll bar. I think there are 2 issues here, it doesn't respect boundaries (like some people I know) and setting the clip property doesn't seem to do anything.