xamarin/Xamarin.Forms
Frame with a shadow on iOS adds a shadow to the contents
Open
#5,108 opened on Feb 1, 2019
a/CSSe/3 :clock3:help wantedin-progressinactivep/iOS 🍎t/bug :bug:up-for-grabs
Repository metrics
- Stars
- (5,644 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
Description
Frames on iOS have drop shadows on the contents of the frame.
Given a simple frame like this:
<Frame class="ColouredFrame" CornerRadius="10" >
<StackLayout Spacing="0">
<StackLayout Orientation="Horizontal" Margin="0, 5, 0, 20">
<Label class="RadioText" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Start" FontAttributes="Bold">Please review and confirm that you agree to our terms and conditions before continuing.</Label>
<Button Text="View" Clicked="Button_Clicked" class="Primary" HorizontalOptions="End" VerticalOptions="Start" BorderRadius="8" WidthRequest="80"></Button>
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="0, 5, 0, 5">
<Label class="RadioText" FontAttributes="Bold" VerticalTextAlignment="Center">I agree</Label>
<Switch x:Name="rbTerms" HorizontalOptions="StartAndExpand" />
<Button x:Name="btnContinue" StyleClass="Primary" Text="Continue" HorizontalOptions="Center" Clicked="ContinueButton_Clicked" BorderRadius="8" IsEnabled="False" WidthRequest="150"></Button>
</StackLayout>
</StackLayout>
</Frame>
and some CSS:
.ColouredFrame {
border-color: #57BABE;
background-color: #2257BABE;
padding: 10 10 10 10;
}
.ColouredFrame label {
color: #57BABE;
}
On iOS the shadow applies to everything within the Frame on Android, it only applies to the frame.
Expected Behavior
I would not expect the shadow to apply to the contents of the frame. At the very least iOS and Android should be consistent.
- Version with issue: Forms 4.0.0.94569-pre3
- Last known good version: N/A
Screenshots
Android:

iOS:

Workaround
Adding HasShadow='False' to the frame solves the issue.