# Notch issue

**URL:** <https://community.glideapps.com/t/notch-issue/38844>\
**Category:** Ask for Help\
**Created:** [February 22, 2022, 4:04pm UTC](https://community.glideapps.com/t/notch-issue/38844 "2022-02-22T16:04:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JohnO](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/johno/32/15806_2.png) [@JohnO](https://community.glideapps.com/u/JohnO)\
**Post date:** [February 22, 2022, 4:04pm UTC](https://community.glideapps.com/t/notch-issue/38844/1 "2022-02-22T16:04:20Z")

</div>

When I use the bold theme the image fits perfectly into the notch. If I use another theme, the notch is always white, regardless of whether it is day or night mode. Does anyone know why that is and how I can use the notch in every theme?

 ![IMG_0519.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/10d7f9fa31baddcc40cda8761e621c45f8e5ae87.jpeg)  
 ![IMG_0520.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/92777c85a13d5a5a5efd8b5cba1b94be163f62f1.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 22, 2022, 11:55pm UTC](https://community.glideapps.com/t/notch-issue/38844/2 "2022-02-22T23:55:56Z")

</div>

Do you have any external CSS for this screen? Is this Glide Apps or Glide Pages?

---

<div class="post-metadata">

**Author:** ![JohnO](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/johno/32/15806_2.png) [@JohnO](https://community.glideapps.com/u/JohnO)\
**Post date:** [February 23, 2022, 10:53am UTC](https://community.glideapps.com/t/notch-issue/38844/3 "2022-02-23T10:53:54Z")

</div>

I used CSS in the picture, but I have the same problem without CSS. For example, if I’m on the sign-in screen with a background image or if the app switches to night mode, the notch doesn’t switch with it.

I use Glide Apps. As I said, the problem is everywhere except for the bold theme.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 23, 2022, 11:48am UTC](https://community.glideapps.com/t/notch-issue/38844/4 "2022-02-23T11:48:23Z")

</div>

Let’s start with your CSS first. I assume you’re using CSS to hide the top nav bar? Can you share your code so we can debug?

The notch might be a part of the screen that you can’t or have not touched with CSS.

I have designed screens like this before, I don’t seem to have a problem like you.

---

<div class="post-metadata">

**Author:** ![JohnO](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/johno/32/15806_2.png) [@JohnO](https://community.glideapps.com/u/JohnO)\
**Post date:** [February 23, 2022, 3:28pm UTC](https://community.glideapps.com/t/notch-issue/38844/6 "2022-02-23T15:28:00Z")

</div>

Wow that looks great can you show me how you made it?

This is the CSS Code I used:

```auto
<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}

#app-root [opacity='1'] {
color: transparent;
}

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 23, 2022, 5:31pm UTC](https://community.glideapps.com/t/notch-issue/38844/7 "2022-02-23T17:31:10Z")

</div>

I’m guessing your screenshot was taken from an iPhone. This is likely a bug that many iOS users complain about.

---

<div class="post-metadata">

**Author:** ![JohnO](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/johno/32/15806_2.png) [@JohnO](https://community.glideapps.com/u/JohnO)\
**Post date:** [February 23, 2022, 7:40pm UTC](https://community.glideapps.com/t/notch-issue/38844/8 "2022-02-23T19:40:30Z")

</div>

Yes the screenshot is from an iPhone.

Yes, I also think that it is a bug, because the problem also occurs without CSS. As described above, even if the device is in night mode, the notch remains white. Just not in the bold theme. Is there any solution or work around?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 23, 2022, 10:03pm UTC](https://community.glideapps.com/t/notch-issue/38844/9 "2022-02-23T22:03:35Z")

</div>

There is no other way. You can follow the following thread with the behavior I described earlier.

> [@Login screen broken on iphone](https://community.glideapps.com/t/login-screen-broken-on-iphone/36579/15):
>
> Besides the keyboard disappearing there is the white strip at the top and possibly they are related. As @Himaladin pointed out… @SantiagoPerez perhaps you and the team could try to reproduce it with the address bar in the bottom. Your screen shots have the address bar at the top. I am bitten by the keyboard disappearing bug pretty regularly and just assumed the team was on it.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 24, 2022, 12:06am UTC](https://community.glideapps.com/t/notch-issue/38844/10 "2022-02-24T00:06:51Z")

</div>

@Himaladin was spot on with the comments above. It’s a known issue with iOS.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [February 25, 2022, 12:07am UTC](https://community.glideapps.com/t/notch-issue/38844/11 "2022-02-25T00:07:16Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.