microsoft / fluentui-react-native

A react-native component library that implements the Fluent Design System.
https://developer.microsoft.com/fluentui
MIT License
1.27k stars 163 forks source link

fix(Apple): Render vector borders on Button #3658

Closed Saadnajmi closed 4 months ago

Saadnajmi commented 4 months ago

Platforms Impacted

Description of changes

Due to a very obscure check inside of React Native's iOS (and macOS) implementation, borders on views are sometimes drawn as raster images. This means that when you zoom into a view (if it's a ScrollView for example), the corner radio don't scale well, and you can get blurriness. Luckily, the fix is to just add the style property overflow: 'hidden'. This seems like a safe/good thing to do for all platforms, so I didn't gate it behind a platform check

Verification

Before: Screenshot 2024-06-18 at 3 34 02 PM

After: Screenshot 2024-06-18 at 3 34 21 PM

Pull request checklist

This PR has considered (when applicable):