Description

When using a Button control with text and an image, it's noticed when the FlowDirection is set to RightToLeft, the text and image can start to overlap. It's most noticible when using smaller images such as when using a glyph inside a FontImageSource. This only effects iOS and is not reproducible on Windows or Android.

LeftToRight

RightToLeft

Steps to Reproduce

1. Create a new .net maui application
2. In MainPage, set FlowDirection=RightToLeft for ContentPage
3. Add a Button with a text and FontImageSource inside a Grid with a WidthRequest
   <Grid WidthRequest="400"> <Button x:Name="aboutAppButton" BackgroundColor="LightGreen" Text="This is a Regular Button" FontSize="24" TextColor="Black" VerticalOptions="Center"> <Button.ImageSource> <FontImageSource Glyph="&#xfffc;" Size="24" Color="Black" FontFamily="OpenSansRegular" /> </Button.ImageSource> </Button> </Grid>
4. Run application on iOS simulator
5. Expect text and image to NOT overlap

Link to public reproduction project repository

No response

Version with bug

9.0.50 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 18

Did you find any workaround?

Separate out the Image and Text from Button to be a Image and Label control within a Layout with a TapGestureRecognizer.

Relevant log output