Image resolution mismatch (.png, @2x.png, @3x.png) in AbsoluteLayout and RelativeLayout

I'm implementing a cross-platform app using Xamarin Forms and I'm struggling with a strange bug:
I'm trying to create a button with a text upon it. To achieve it, I'm using AbsoluteLayout.

I've added a image to the iOS project for each iOS resolution types (.png, @2x.png, @3x.png). Everything works fine with standard <Image /> tag. However, when wrapping the image in absolute layout - the Image lose its resolution proportion and it results in borders.

The code above:

    <AbsoluteLayout BackgroundColor="Blue">
        <Image Source="home/donation-button.png"
            AbsoluteLayout.LayoutFlags="All" 
                x:Name="Button"
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
            />
        <Label Text="Hello, World!"
                TextColor="White"
                FontAttributes="Bold"
                FontSize="16"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0, 1, 1, 0.5" />
    </AbsoluteLayout> 

Produce the following:

on iPhone 6+/6s+/7+ (the simulator is iPhone 7 Plus):
Valid image on iPhone 7 Plus
This is the expected behavior.

on iPhone 6/6s/7 (the simulator is iPhone 7):
Note the little blue borders on the image
Note the little blue borders on the image, which was set as background on AbsoluteLayout

on 5SE/5s and down:
Note the blue borders
Note the big blue borders.

To debug this, I put the same image twice - firstly in AbsoluteLayout and then as standard item inside the StackLayout. The image in the absolute layout has the proportion bug and the image without it doesn't have.

I'm kinda lost here. There's any way to hack our way through it? I've tried to create. a custom renderer to assign the image size manually, but it seems like UIImage gives different size units then Xamarin uses, and it won't solve the problem on Android.

Any advice will be really appreciated !

Sign In or Register to comment.