[Gallery][WASM][UI Components] Button Click Highlight Appears as Rectangle Instead of Rounded in Safari

[jhanvi03]

Current behavior

Upon clicking the button, the highlight appears as a rectangular shape instead of a rounded one, which is inconsistent with the button's design. The behavior is present on Overview page as well as on UI components -> Buttons https://github.com/user-attachments/assets/130f30c3-4ce0-4207-b0d8-60dea23fde8f

https://github.com/user-attachments/assets/6ee1740a-a365-4e4b-8d2a-c52c074e3032

Expected behavior

When the button is clicked, the highlight should appear as a rounded shape, matching the button's rounded design.

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

Steps to reproduce:

1. Open Gallery canary on Safari web browser
2. from overview page, in Fluent click on button and observe the border
3. Now from the Menu, navigate to UI Components -> Button
4. In Fluent click on the button and observe the border

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

WebAssembly

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

This looks like a clipping difference in Safari. @jhanvi03 does it happen in chrome or edge on macOS?

[jhanvi03]

@jeromelaban This is happening in Safari only.