[Shadow Builder][Safari] Clicking the IconToggleButtons randomly scrolls the page back to the top

[NVLudwig]

Current behavior

Safari.Scroll.to.top.on.click.mov

Clicking the ToggleButtons will at times trigger a scroll-to-top and it seems to happen randomly, clicking the same button twice will not always give you the same result.

Expected behavior

No scrolling at all

How to reproduce it (as minimally and precisely as possible)

Launch latest safari on mac and navigate to shadowcontainer/IconToggleButton

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

• MacOs
• Android
• WebAssembly
• WebAssembly renders for Xamarin.Forms
• Windows
• Build tasks

Visual Studio:

• 2017 (version: )
• 2019 (version: )
• for Mac (version: )

Relevant plugins:

• Resharper (version: )

Anything else we need to know?

May be related to an issue @eriklimakc is investigating about this behaviour in Chrome in one of his branches

[eriklimakc]

I have the same behavior in one of my branches for Chefs, but not only on Safari, but also in Chrome, and on Android as well.

[ajpinedam]

@eriklimakc, can I have access to that branch?

Issues seem similar, but starting from the fact that it looks like a ListView/ItemsControl in your sample, I want to say they are different.

I will check it out too.

[eriklimakc]

Also happens (tested Chrome) on this PR unoplatform/Uno.Themes#997.

You can see in the static wasm link here: https://salmon-rock-0cfebe70f-997.eastus2.azurestaticapps.net/

Go to Helpers > ControlExtensions > Click the Leading or Trailing Icon in the TextBox example.

[jeromelaban]

I'm not able to reproduce with latest builds of Safari, @ajpinedam could you validate again? Thanks!

[ajpinedam]

I'm not able to reproduce with latest builds of Safari, @ajpinedam could you validate again? Thanks!

It was reported a similar issue in Chefs and other apps, so the issue still seems to be there.

[Xiaoy312]

i just noticed something perhaps similar, but on-focus-lost:

• open https://unogallerycanary.z27.web.core.windows.net/
• go to Toolkit\ShadowContainer,
• scroll down all the way down
• choose ToggleButton from the combo-box
• (now click anywhere empty (that doesnt respond to click))

  notice that the page doesnt move

• if you click on any of the toggle buttons, and then repeat the previous step

  the page will scroll up somehow

i am using Chrome (Version 120.0.6099.217 (Official Build) (64-bit))

[ramezgerges]

Following Xiao's repro steps gave a different repro. Tested on vivaldi, brave and firefox.

• open https://unogallerycanary.z27.web.core.windows.net/
• scroll all the way down
• now click anywhere empty

  the page will scroll up somehow

This will only work when a page is first loaded. Changing the page makes it repro again. Also, changing the control in the checkbox inside Toolkit\ShadowContainer will also make it repro (any control will do, not necessarily ToggleButton).

Edit: Oh, a similar repro seems to be #1062

[jeromelaban]

I cannot reproduce this issue anymore in the canary. @sakshi173 can you try again?

[NVLudwig]

@jeromelaban I reproed it just now check out the recording here.
https://github.com/unoplatform/Uno.Gallery/assets/29584087/64615120-bd98-45c2-becb-358b11580869

Note that the expanders in the gallery main navigation do the same thing bu on every click: opening a sections scrolls the list all the way back to the top:

Screen.Recording.2024-05-24.at.12.03.45.PM.mov

I get both issues on both Safari and Chrome

[jeromelaban]

@NVLudwig this happens in prod, but not on the canary. Can you validate: https://unogallerycanary.z27.web.core.windows.net

[NVLudwig]

@jeromelaban indeed the canary link does not have this bug.

I noticed 2 sperate issues while looking into the one above:

1. FAB seems ro have a problem in the canary (Safari and Chrome) that is not present in prod. Should I make a new issue? It's the icon that has no spacing with the label in canary only.

2. Only on Canary+Safari the iconToggleButton "flashes" when you click it's neighbour

Screen.Recording.2024-05-28.at.9.58.26.AM.mov

Should I make separate issues?

[sakshi173]

@jeromelaban and @NVLudwig, I checked this issue on the Canary build using multiple browsers (Chrome, MS Edge, Opera), and it is working fine on all of them. However, as Ludwig mentioned, this issue is specific to the Safari browser. Unfortunately, I don't have Safari installed on my laptop, and my attempts to install it have been unsuccessful. As a result, I am unable to test this issue on Safari. Please let me know if this is acceptable for you. Below is the recording for the Canary build.

Uno.Gallery.-.Opera.2024-05-28.11-06-36.mp4

[jeromelaban]

@sakshi173 can test on your mac now please?

[sakshi173]

@jerome, I retested this defect on Mac book, and I am able to reproduce it. below is the video

Screen.Recording.2024-06-12.at.4.13.01.PM.mov

[jeromelaban]

@sakshi173 I'm sorry, I do not see what you're reproducing. I don't see any scrolling up? What are you reproducing?

[NVLudwig]

I think the video refers to one of the other 2 issues I found and was asking about higher up in this thread

[sakshi173]

@jeromelaban I thought now I have to reproduce this issue "Only on Canary+Safari the iconToggleButton "flashes" when you click it's neighbour" as for the main issue "[Shadow Builder][Safari] Clicking the IconToggleButtons randomly scrolls the page back to the top" , I have already updated that I am not able to reproduce it and we can close them.

[jeromelaban]

Thanks. I see, let's not deal with multiple issues in a single issue. Let's split them instead.

[jeromelaban]

This issue is now split to unoplatform/Uno.Themes#1430 and unoplatform/Uno.Themes#1431