[Bug] iOS 14: Radio buttons gained unremovable one pixel border

[Tommigun1980]

Description

When updating to iOS 14, all my radio buttons now show an unremovable one pixel border around them.

Steps to Reproduce

1. Add a radio button and run on iOS 14.

I used the following:

                    <RadioButton
                        Content="Hello world!"
                        IsChecked="True"
                        GroupName="myRadioGroup" />

Please note that even explicitly trying to remove the border doesn't work:

                    <RadioButton
                        Content="Hello world!"
                        IsChecked="True"
                        BorderColor="Transparent"
                        BorderWidth="0"
                        GroupName="myRadioGroup" />

Expected Behavior

There should not be a border around the radio buttons.

Actual Behavior

There is a border around the radio buttons.

Basic Information

• Version with issue: Xamarin.Forms 5-pre1
• IDE: VS For Mac 2019
• Affected Devices: iOS 14 devices

Screenshots

Workaround

Tried to explicitly set border width to 0 and border color to transparent, but the border is still shown and can't seemingly be hidden.

[jsuarezruiz]

I have created a reproduction sample:
Issue12345.zip

But cannot reproduce the issue:

I am using Xamarin.Forms 5-pre1 and testing in iOS 14 simulators, can see the result in the previous screenshot. @Tommigun1980 Could you review the attached sample?.

[Tommigun1980]

I have created a reproduction sample:
Issue12345.zip

But cannot reproduce the issue:

I am using Xamarin.Forms 5-pre1 and testing in iOS 14 simulators, can see the result in the previous screenshot. @Tommigun1980 Could you review the attached sample?.

Hi @jsuarezruiz - did you test your repro project with Xamarin.Forms 5? It only happens if I use iOS 14 + XF5. There is no problem with XF4, to which I have temporarily downgraded now.

Thanks.

[Tommigun1980]

Hi again @jsuarezruiz - I decided to update to Xamarin.Forms 5 again now that dependent libraries work properly with it so this became an issue again. Could you please confirm if you did your test with Xamarin.Forms 5 as the issue doesn't happen with Xamarin.Forms 4.

I double checked the styling in my app and I don't have any custom renderers or styles set up for the radio buttons, so it should be vanilla on my side.

My guess is that the radio button incorrectly uses some other component's color as its border color in XF 5. The color I get in the border is the exact same color I use as an 'accent color' in my app's theme. Problem is I style almost every single control with it so it would take me a long time to isolate which one the radio button is incorrectly using. Maybe you guys could give a pointer on this and I would be happy to help as radio buttons look very buggy for me now.

Thank you.

[jsuarezruiz]

@Tommigun1980 I am using Xamarin.Forms 5.0.0 branch and iOS 14.1 simulators. Could you attach an example where reproduce the issue?

[Tommigun1980]

@Tommigun1980 I am using Xamarin.Forms 5.0.0 branch and iOS 14.1 simulators. Could you attach an example where reproduce the issue?

Hi. This is the XAML:

                <StackLayout Style="{StaticResource ContentStyle}">
                    <Label Text="Select date and time" />
                    <RadioButton
                        Content="Right now"
                        IsChecked="True"
                        GroupName="timeRadioGroup" />
                    <RadioButton
                        Margin="0, -10, 0, 0"
                        x:Name="specifyDateAndTimeRadioButton"
                        Content="Specify date and time"
                        GroupName="timeRadioGroup" />
                    <toolkit:Expander
                        IsVisible="{Binding IsChecked, Source={x:Reference specifyDateAndTimeRadioButton}}"
                        IsExpanded="{Binding IsChecked, Source={x:Reference specifyDateAndTimeRadioButton}}">
                        <StackLayout>
                            <DatePicker />
                            <TimePicker />
                        </StackLayout>
                    </toolkit:Expander>
                </StackLayout>

I don't have any special renderers or styles for check box.

[PureWeen]

Not sure @Tommigun1980

did you test with @jsuarezruiz 's repro? I updated his repro to the latest 5.0 and I don't see any borders

Pinging @hartez just in case something rings a bell for him

That red border looks like a selector. Do you have anything enabled that would just select elements in the view? like a layout inspector or other?

[Tommigun1980]

Hi @PureWeen and @jsuarezruiz, I was not able to reproduce it with the repro case when run as is, but was when copied to my project. I removed one implicit style at a time until found that the following affected the radio buttons:

<Style
    TargetType="Frame">
    <Setter
        Property="BorderColor"
        Value="{DynamicResource MyOutlineColor}" />
</Style>

So apparently a frame's stylings "bleed" into radio buttons.
What I don't understand is why this happens only on iOS 14.

[Tommigun1980]

I can't get this to work as is. I need the implicit styling on the frame, but not on radio buttons.
Explicitly overriding BorderColor on the radio button instances, or by adding

<Style
    TargetType="RadioButton"
    ApplyToDerivedTypes="True">
    <Setter
        Property="BorderColor"
        Value="{x:Null}" />
</Style>

does nothing -- if you ever set a border color on frames then radio buttons look ugly on iOS 14.
Maybe I updated XF around the same time and it was a change in XF instead, but this definitely did use to work. I no longer have any iOS 13 devices to test on.

As a workaround I now do

<!-- TODO: set value to Value="{DynamicResource MyOutlineColor}" once https://github.com/xamarin/Xamarin.Forms/issues/12345 is fixed />-->
<Style
    TargetType="Frame">
    <Setter
        Property="BorderColor"
        Value="{x:Null}" />
</Style>

and manually set frame border colors. Seems to do the trick, so this is no longer urgent for me, but may bite other people who have set a frame border color.

Thank you.

[programatix]

I'm still having this issue with Xamarin Forms 5.0.0.2401 even though it is marked as resolved. Radio buttons inside a Frame with targeted BorderColor style cause them to have border.

[ahoke-cr]

I have radiobuttons not inside a frame that have a black 1-pixel border on iOS. I have a global style setting border width to zero and color to transparent. iOS 15.5 and Xamarin.Forms 5.0.0.2083