Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compatibility issue on iPhone with Notch: White Bars on the Edges #918

Closed
wrayx opened this issue Mar 5, 2023 · 1 comment
Closed

Compatibility issue on iPhone with Notch: White Bars on the Edges #918

wrayx opened this issue Mar 5, 2023 · 1 comment
Labels
compatibility Browser type/version or OS compatibility

Comments

@wrayx
Copy link

wrayx commented Mar 5, 2023

Describe the bug

There is a white bar at the top of the screen when viewing it from an iPhone (with notch) in Safari dark mode. The light mode works just fine as the background and nav bar's colour are consistent.

Expected behaviour

In dark mode: a dark background colour on the body that is consistent with the nav bar.
Or, expand the website to cover the whole area (notch be damned) by adding viewport-fit=cover to the meta viewport tag in the default html.

Logs/Screenshots

Smartphone

  • Device: iPhone 14 Pro Max (but this has been an issue since iPhone X)
  • OS: iOS 16.3.1
  • Browser: 16.3

Additional context

Referennce to: “The Notch” and CSS
@cotes2020
Copy link
Owner

Thank you for reaching out @wrayx, but the referennce (“The Notch” and CSS) seems to be out of date and does not change the color of the status bar

@cotes2020 cotes2020 added the compatibility Browser type/version or OS compatibility label Mar 16, 2023
nabin-nath added a commit to nabin-nath/nabin-nath.github.io that referenced this issue Mar 29, 2023
@nabin-nath @cotes2020
@joshjohanning @v4vong
updating to chirpy 5.6.0 (#2)
054084d 
* chore(deps): upgrade NPM packages

* chore: update code style config

* refactor(build): modularize JS code

- replace gulp with rollup
- remove JS output from repo

* chore(ci,tools): adapt to changes in JS builds

* chore: update configure-pages action (cotes2020#931)

* feat: change TOC plugin to `tocbot` (cotes2020#774)

* style: improve code style of SCSS & YAML

* fix: notch status bar doesn't match theme color (cotes2020#918)

Resolves cotes2020#918

* refactor: remove version number from self host config

* fix: some console snippets will be incompletely copied

Sample:

```console
echo $PATH
```

* style: fix scss lint issue

type: declaration-block-no-redundant-longhand-properties

* feat(ux): turn home page posts into clickable cards (cotes2020#895)

Resolves cotes2020#895

* chore: recover accidentally deleted LQIP style

* chore(tools): resume git checkout in initialization

* chore(tools): add JS dist to gem release

* docs: migrate upgrade details to the wiki

* chore(release): 5.6.0

* wip

* fix: mode-toggle leads to Disqus loading failure (cotes2020#945)

* search fix

* wip

---------

Co-authored-by: Cotes Chung <[email protected]>
Co-authored-by: Josh Johanning <[email protected]>
Co-authored-by: Song-Zi Vong <[email protected]>
HOKAGO-MEMORIES added a commit to HOKAGO-MEMORIES/hokago-memories.github.io that referenced this issue Jan 18, 2024
@HOKAGO-MEMORIES
Revert "fix: notch status bar doesn't match theme color (cotes2020#918)"
2f968de 
This reverts commit 820ba62.
gudtldn pushed a commit to gudtldn/gudtldn.github.io that referenced this issue Jul 26, 2024
@cotes2020 @gudtldn
fix: notch status bar doesn't match theme color (cotes2020#918)
542aa0d 
Resolves cotes2020#918
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
compatibility Browser type/version or OS compatibility
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cotes2020 @wrayx