Ion-toolbar color issue on iphone 12

Newer iphones that have the curved extra piece of screen at the top are causing issues for me for one of my pages.

All my other pages work fine. I have provided a screenshot from the emulator of one that works and one that doesn’t. The issue is the white at the top.
This page works fine on the older smaller iphones and the web.

With this page I want the texture of the background to show through so I have made ion-toolbar transparent.
Should I offset the ion-content even more? If I do this I need to adjust all the content down.

  --color: var(--ion-color-primary-contrast);
  --background: transparent;
  --ion-color-base: transparent !important;
  --border-style: none!important;
  --padding-bottom: 0;
  --border-color: transparent !important;

ion-header::after {
  display: none;

ion-menu-button {
  --color: var(--ion-color-primary-contrast);

// Current

ion-content {
  --offset-top: 56px!important;
  --background: radial-gradient(circle at center center, transparent,rgb(35,31,32)),repeating-linear-gradient(135deg, rgb(35,31,32) 0px, rgb(35,31,32) 2px,transparent 2px, transparent 10px,rgb(35,31,32) 10px, rgb(35,31,32) 11px,transparent 11px, transparent 21px),repeating-linear-gradient(45deg, rgb(65,64,66) 0px, rgb(65,64,66) 4px,transparent 4px, transparent 8px),linear-gradient(90deg, rgb(35,31,32),rgb(35,31,32));;


Non transparent toolbar that works

  --background: var(--ion-color-secondary);
  --color: var(--ion-color-secondary-contrast);

It looks like removing the offset fixes the issue. Will leave here in case it helps others.

Is this for v3 or the newer ionic versions? V3 didn’t have css variables :grinning_face_with_smiling_eyes:

Ionic V4 and V5.
Looks like I created my own issue by messing with the offset at some stage.

1 Like

Ah now I see why I did it: