Top Banner inconsistently filling notch phone notch whitespace

I am designing for a mobile phone and am struggling with some UI in consistencies. I am placing a banner at the top of the screen and in some instances it fills in behind the notch (this is the behaviour I want - see image 1). On others screens it does not (see image 2). All settings are the same.

Does anyone have any ideas? I cannot seem to find a solution anywhere.

Hey @gunterrichter,

It looks like there is probably an extra Rectangle inside of the Rectangle you are using as part of the top bar. Check the nested components to ensure you don’t have any duplicates that may be causing the issue. If the issue persists, feel free to reach out to the support team and we will be happy to take a look.

-Jessi

1 Like

Welcome to the community @gunterrichter! :partying_face:

Check what Jessi said and if you could share some screenshots of your setup, that would be really helpful!

Thanks Jessi - I am taking a look at that now.

Thanks Dilon!

Thank you so much. It seems that there was a single pixel between the top of the coloured rectangle and the edge of the screen. It was only apparent when zooming in to around 400% or so. My screens are looking much better now and all consistent. Thanks again.