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.
ion-toolbar{
--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
ion-toolbar{
--background: var(--ion-color-secondary);
--color: var(--ion-color-secondary-contrast);
}
