fix: Scrolling on WebKit randomly produces blank content temporarily

[MartinZikmund]

trafficstars

GitHub Issue (If applicable): closes #17640

PR Type

What kind of change does this PR introduce?

• Bugfix

What is the current behavior?

Safari sometimes causes blank content to show up temporarily until a user action when scrolling, especially when the window is not active. See https://stackoverflow.com/q/9807620 for detailed discussion.

The issue is not Uno side - I have exported raw HTML of the state with blanked out content and after it appeared again and there was not actual difference, so it is all on the rendering side of the browser.

What is the new behavior?

Applying -webkit-transform3d to the direct child of ScrollContentPresenter seems to resolve this issue, pending further testing. Setting this should not collide with transform set from managed code, where we set it directly on the individual elements.

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] Docs have been added/updated which fit documentation template (for bug fixes / features)
• [ ] Unit Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• [ ] Validated PR Screenshots Compare Test Run results.
• [x] Contains NO breaking changes
• [x] Associated with an issue (GitHub or internal) and uses the automatic close keywords.
• [x] Commits must be following the Conventional Commits specification.

Other information

Internal Issue (If applicable):

[unodevops]

🤖 Your Docs stage site is ready! Visit it here: https://unodocsprstaging.z13.web.core.windows.net/pr-18054/index.html

[unodevops]

🤖 Your WebAssembly Sample App stage site is ready! Visit it here: https://unowasmprstaging.z20.web.core.windows.net/pr-18054/index.html

[nventive-devops]

The build 137798 found UI Test snapshots differences: android-28-net8: 22, android-28-net8-Snap: 59, ios: 7, ios-Snap: 45, skia-gtk-screenshots: 28, skia-linux-screenshots: 28, skia-windows-screenshots: 26, wasm: 399, wasm-automated-net8.0-UWP-Default-automated: 635, wasm-automated-net8.0-UWP-RuntimeTests-0: 0, wasm-automated-net8.0-UWP-RuntimeTests-1: 0, wasm-automated-net8.0-UWP-RuntimeTests-2: 0, wasm-automated-net8.0-WinUI-Benchmarks-automated: 0, wasm-automated-net8.0-WinUI-RuntimeTests-0: 0, wasm-automated-net8.0-WinUI-RuntimeTests-1: 0, wasm-automated-net8.0-WinUI-RuntimeTests-2: 0

Details

• android-28-net8: 22 changed over 832

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • DecimalFormatterTest_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
  • Detereminate_ProgressRing_Validation0_[#FF0000_#FF0000_#FF0000_#FF0000]_UITests_Microsoft_UI_Xaml_Controls_ProgressRing_WinUIDeterminateProgressRing
  • Detereminate_ProgressRing_Validation75_[#FF0000_#008000_#008000_#008000]_Progress-Ring-Value-75
  • Detereminate_ProgressRing_Validation50_[#FF0000_#008000_#008000_#FF0000]_Progress-Ring-Value-50
  • ImageStretch_None_Uno_UI_Samples_UITests_ImageTestsControl_Image_Stretch_None
  • ProgressRing_IsEnabled_Running_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • NativeCommandBar_Size_Uno_UI_Samples_Content_UITests_CommandBar_CommandBar_Dynamic
  • ProgressRing_Visibility_Collapsed_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • ListView_SelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
  • SelectionTest_UITests_Microsoft_UI_Xaml_Controls_RadioButtonsTests_RadioButtonsPage
  • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
  • ToggleCollapsedStateToVerifyClipping_UITests_Shared_Microsoft_UI_Xaml_Controls_ExpanderTests_ExpanderColorValidationPage
  • WebView_NavigateToLongString_AfterSuccess
  • UpDownEnabledTest_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
  • When_FontWeight_Changed_UITests_Shared_Windows_UI_Xaml_Controls_TextBlockControl_TextBlock_FontWeight_Dynamic
  • When_MaxLines_Changed_Without_TextWrapping_UITests_Shared_Windows_UI_Xaml_Controls_TextBlockControl_SimpleText_MaxLines_Different_Font_Size
  • Detereminate_ProgressRing_Validation25_[#FF0000_#008000_#FF0000_#FF0000]_Progress-Ring-Value-25
  • When_Parent_PointerMoved_After_drag_on_non-scrolling_ScrollViewer
  • When_Parent_PointerMoved_After_drag_on_ScrollViewer_-_touch
  • RadioButtons_Enable_Validation_Uno_UI_Samples_Content_UITests_ButtonTestsControl_RadioButton_IsEnabled_Automated

• android-28-net8-Snap: 59 changed over 1065

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Image_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Vertical_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Vertical
  • MediaPlayerElement_Using_3gp_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_3gp_Extension
  • MediaPlayerElement_Using_mp3_Audio_only_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Mp3_Extension
  • MediaPlayerElement_Using_ogg_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Ogg_Extension
  • Scrolling_MUXControlsTestApp_ScrollViewDynamicPage_MUXControlsTestApp_ScrollViewDynamicPage
  • Scrolling_MUXControlsTestApp_ScrollViewKeyboardAndGamepadNavigationPage_MUXControlsTestApp_ScrollViewKeyboardAndGamepadNavigationPage
  • ListView_ListViewChangeView_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewChangeView
  • TextBlock_TextBlock_LineHeight_Inlines_Uno_UI_Samples_Content_UITests_TextBlockControl_TextBlock_LineHeight_Inlines
  • TextBlock_TextBlock_Nested_Measure_With_Outer_Alignments_Uno_UI_Samples_Content_UITests_TextBlockControl_TextBlock_Nested_Measure_With_Outer_Alignments
  • Icons_UITests_Shared_Windows_UI_Xaml_Controls_BitmapIconTests_BitmapIcon_Foreground_UITests_Shared_Windows_UI_Xaml_Controls_BitmapIconTests_BitmapIcon_Foreground
  • ListView_ListViewScrollBar_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewScrollBar
  • MediaPlayerElement_Mini_player_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Minimal
  • TeachingTip_UITests_Microsoft_UI_Xaml_Controls_TeachingTipTests_TeachingTipPage_UITests_Microsoft_UI_Xaml_Controls_TeachingTipTests_TeachingTipPage
  • TextBox_PasswordBox_Header_PlaceholderText_Uno_UI_Samples_Content_UITests_TextBoxControl_PasswordBox_Header_PlaceholderText
  • TextBox_PasswordBox_InputScope_NumericPin_Uno_UI_Samples_Content_UITests_TextBoxControl_PasswordBox_InputScope_NumericPin
  • Image_UITests_Windows_UI_Xaml_Controls_ImageTests_SvgImageSource_FromMsAppData_UITests_Windows_UI_Xaml_Controls_ImageTests_SvgImageSource_FromMsAppData
  • ListView_ListView_Padding_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListView_Padding
  • ListView_ListView_Padding_Unconstrained_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListView_Padding_Unconstrained
  • TextBlock_TextBlock_Inlines_TemplatedParent_Uno_UI_Samples_Content_UITests_TextBlockControl_TextBlock_Inlines_TemplatedParent
  • BreadcrumbBar_MUXControlsTestApp_BreadcrumbBarPage_MUXControlsTestApp_BreadcrumbBarPage

• ios: 7 changed over 268

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • ProgressRing_IsEnabled_Running_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • When_ExtendedSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • ProgressRing_Visibility_Collapsed_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • When_SingleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • Check_ListView_Swallows_Measure_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_With_ListViews_Count_Measure
  • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
  • TextBox_UpdatedBinding_On_OneWay_Mode_UITests_Windows_UI_Xaml_Controls_TextBox_TextBox_Bindings

• ios-Snap: 45 changed over 1056

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Brushes_ImageBrushWithScaleTransform_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushWithScaleTransform
  • Brushes_PanelImageBrush_Uno_UI_Samples_UITests_ImageBrushTestControl_PanelImageBrush
  • ListView_ListViewSelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
  • NavigationView_FluentStyle_NavigationViewSample_SamplesApp_Samples_Microsoft_UI_Xaml_Controls_NavigationViewTests_FluentStyle_FluentStyle_NavigationViewSample
  • TextBlock_Attributed_text_FontSize_Changing_Uno_UI_Samples_Content_UITests_TextBlockControl_Attributed_text_FontSize_Changing
  • ColorPicker_ColorPickerSample_UITests_Microsoft_UI_Xaml_Controls_ColorPickerTests_ColorPickerSample
  • ColorPicker_WinUIColorPickerPage_UITests_Shared_Microsoft_UI_Xaml_Controls_ColorPickerTests_WinUIColorPickerPage
  • Image_UITests_Windows_UI_Xaml_Controls_ImageTests_Image_Formats_UITests_Windows_UI_Xaml_Controls_ImageTests_Image_Formats
  • Shapes_UITests_Windows_UI_Xaml_Shapes_Ellipse_StrokeThickness_UITests_Windows_UI_Xaml_Shapes_Ellipse_StrokeThickness
  • MediaPlayerElement_Mini_player_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Minimal
  • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Smaller_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Smaller
  • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Taller_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Taller
  • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Wider_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Wider
  • Brushes_ImageBrushStretch_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushStretch
  • Default_Uno_UI_Samples_Content_UITests_WebView_WebView_AnchorNavigation_Uno_UI_Samples_Content_UITests_WebView_WebView_AnchorNavigation
  • Image_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Horizontal_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Horizontal
  • Brushes_PathImageBrushfill_Uno_UI_Samples_UITests_ImageBrushTestControl_PathImageBrushfill
  • Brushes_Uno_UI_Samples_UITests_ImageBrushTestControl_DoubleImageBrushInList_Uno_UI_Samples_UITests_ImageBrushTestControl_DoubleImageBrushInList
  • Grid_Grid_DataBound_ColumnRow_Definitions_Uno_UI_Samples_Content_UITests_GridTestsControl_Grid_DataBound_ColumnRow_Definitions
  • ListView_ListView_WithScrollViewer_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListView_WithScrollViewer

• skia-gtk-screenshots: 28 changed over 2216

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • CalendarView_Theming.png
  • CalendarView_Theming.png-dark
  • ImageOpened.png
  • Mini player.png-dark
  • Mini player.png
  • RectangleStretchFill.png
  • PanelImageBrush.png-dark
  • PanelImageBrush.png
  • ColorPickerSample.png-dark
  • ColorPickerSample.png
  • SelectorBarSamplePage.png-dark
  • SelectorBarSamplePage.png
  • EllipsemaskingEllipseSuperpositionPanel.png
  • Uniform100x100.png-dark
  • Uniform100x100.png
  • Native.png-dark
  • Native.png
  • RectanglemaskingRectangleGrid.png
  • ImageBrushChangingCornerRadius.png
  • ImageBrush_UniformToFill.png

• skia-linux-screenshots: 28 changed over 2216

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • CalendarView_Theming.png-dark
  • CalendarView_Theming.png
  • BorderImageBrush.png-dark
  • BorderImageBrush.png
  • ImageIconPage.png-dark
  • ImageIconPage.png
  • ImageInStackPanel.png-dark
  • ImageInStackPanel.png
  • Image_UseTargetSize.png-dark
  • Image_UseTargetSize.png
  • CompositionEffectBrush.png-dark
  • CompositionEffectBrush.png
  • Ellipse.png-dark
  • Ellipse.png
  • ImageBrush_SameWithDelay.png-dark
  • ImageBrush_SameWithDelay.png
  • ImageBrushStretch.png-dark
  • ImageBrushStretch.png
  • Rectangle.png-dark
  • Rectangle.png

• skia-windows-screenshots: 26 changed over 2216

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • BorderImageBrush.png
  • BorderImageBrushRelativeTransform.png-dark
  • BorderImageBrushRelativeTransform.png
  • CalendarView_Theming.png-dark
  • ImageIconPage.png-dark
  • ImageIconPage.png
  • Image_UseTargetSize.png-dark
  • Image_UseTargetSize.png
  • BorderImageBrush.png-dark
  • CalendarView_Theming.png
  • DoubleImageBrushInList.png-dark
  • DoubleImageBrushInList.png
  • ImageBrush_SameWithDelay.png-dark
  • ImageBrush_SameWithDelay.png
  • ImagesInlineInFlipView.png-dark
  • ImagesInlineInFlipView.png
  • Mini player.png-dark
  • Mini player.png
  • ImageBrushAlignmentXY2.png-dark
  • ImageBrushAlignmentXY2.png

• wasm: 399 changed over 1043

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • GenericApp.Views.Samples.Shared.Content.UITests.GridViewMultipleSelectionMode
  • MUXControlsTestApp.HierarchicalNavigationViewMarkup
  • MUXControlsTestApp.InfoBarPage
  • MUXControlsTestApp.NavigationViewCustomThemeResourcesPage
  • SamplesApp.Samples.Windows_UI_Xaml_Controls.NavigationViewTests.NavigationView_BasicNavigation
  • SamplesApp.Samples.Windows_UI_Xaml_Controls.NavigationViewTests.NavigationView_Pane_Automated
  • SamplesApp.Windows_UI_Xaml_Controls.Canvas.Measure_Children_In_Canvas
  • SamplesApp.Windows_UI_Xaml_Controls.ListView.ListViewMarginTest
  • SamplesApp.Windows_UI_Xaml_Shapes.PathTestsControl.PathResizeTest
  • UITests.Microsoft_UI_Xaml_Controls.ImageIconTests.ImageIconPage
  • UITests.Microsoft_UI_Xaml_Controls.InfoBadgeTests.InfoBadgePage
  • UITests.Microsoft_UI_Xaml_Controls.NavigationViewTests.NavigationViewBasicPage
  • UITests.Shared.Windows_Globalization.Language_Properties
  • UITests.Shared.Windows_Security_Credentials.PasswordVaultTests.CredentialsPersistence
  • UITests.Shared.Windows_UI_Xaml.UIElementTests.UIElement_Native_Child
  • UITests.Shared.Windows_UI_Xaml.VisualStateTests.VisualState_ComplexSetters_Automated
  • UITests.Shared.Windows_UI_Xaml.ViusalStateTests.VisualState_AdaptiveTrigger_Storyboard
  • UITests.Shared.Windows_UI_Xaml_Controls.ContentDialogTests.ContentDialog_Closing
  • UITests.Shared.Windows_UI_Xaml_Controls.ContentDialogTests.ContentDialog_Simple
  • UITests.Shared.Windows_UI_Xaml_Controls.TextBoxControl.TextBox_Binding_Null

• wasm-automated-net8.0-UWP-Default-automated: 635 changed over 1952

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Automation_UITests_Shared_Windows_UI_Xaml_Automation_AutomationProperties_Name_UITests_Shared_Windows_UI_Xaml_Automation_AutomationProperties_Name
  • AutoSuggestBox_UITests_Windows_UI_Xaml_Controls_AutoSuggestBoxTests_AutoSuggestBox_Description_UITests_Windows_UI_Xaml_Controls_AutoSuggestBoxTests_AutoSuggestBox_Description
  • BitmapImage_vs_SvgImageSource_BitmapLocal_UITests_Windows_UI_Xaml_Controls_ImageTests_BitmapImage_vs_SvgImageSource
  • Border_CornerRadius_BorderThickness_UITests_Windows_UI_Xaml_Controls_BorderTests_Border_CornerRadius_BorderThickness
  • Check_CornerRadius_Border_Basic_sample
  • Clipping_UITests_Shared_Windows_UI_Xaml_Clipping_ClippingToControlBounds_UITests_Shared_Windows_UI_Xaml_Clipping_ClippingToControlBounds
  • ContentDialog_Closing_Deferred_UITests_Shared_Windows_UI_Xaml_Controls_ContentDialogTests_ContentDialog_Closing
  • Default_UITests_Toolkit_ElevatedView_CornerRadius_UITests_Toolkit_ElevatedView_CornerRadius
  • Default_UITests_Toolkit_ElevatedView_Levels_UITests_Toolkit_ElevatedView_Levels
  • FocusManager_GetFocusedElement_Grid_Validation_Uno_UI_Samples_Content_UITests_FocusTests_FocusManager_GetFocus_Automated
  • Keyboard_Textbox_InsideScrollViewer_Validation_5_-_Remove_Focus_on_numberTextBox
  • Keyboard_Textbox_InsideScrollViewer_Validation_Uno_UI_Samples_Content_UITests_TextBoxControl_Input_Test_InsideScrollerViewer_Automated
  • Keyboard_Textbox_IsEnabled_Validation_Uno_UI_Samples_Content_UITests_TextBoxControl_Input_Test_InsideScrollerViewer_Automated
  • BitmapImage_vs_SvgImageSource_BitmapRemote_UITests_Windows_UI_Xaml_Controls_ImageTests_BitmapImage_vs_SvgImageSource
  • BitmapImage_vs_SvgImageSource_SvgRemote_UITests_Windows_UI_Xaml_Controls_ImageTests_BitmapImage_vs_SvgImageSource
  • Border_CornerRadius_BorderThickness_Border-CornerRadius-10-BorderThickness-10_0_0_10
  • Buttons_ToggleSwitch_IsEnable_Automated_Uno_UI_Samples_Content_UITests_ButtonTestsControl_ToggleSwitch_IsEnable_Automated
  • Buttons_UITests_Microsoft_UI_Xaml_Controls_RadioButtonsTests_RadioButtonsBasicPage_UITests_Microsoft_UI_Xaml_Controls_RadioButtonsTests_RadioButtonsBasicPage
  • Clipping_SamplesApp_Windows_UI_Xaml_Clipping_ButtonClippingTestsControl_SamplesApp_Windows_UI_Xaml_Clipping_ButtonClippingTestsControl
  • ComboBoxTests_Fullscreen_Popup_Generic_Opened

• wasm-automated-net8.0-UWP-RuntimeTests-0: 0 changed over 1

• wasm-automated-net8.0-UWP-RuntimeTests-1: 0 changed over 1

• wasm-automated-net8.0-UWP-RuntimeTests-2: 0 changed over 1

• wasm-automated-net8.0-WinUI-Benchmarks-automated: 0 changed over 1

• wasm-automated-net8.0-WinUI-RuntimeTests-0: 0 changed over 1

• wasm-automated-net8.0-WinUI-RuntimeTests-1: 0 changed over 1

• wasm-automated-net8.0-WinUI-RuntimeTests-2: 0 changed over 1