Skip to content

Gitea scrollbar in Safari is ugly #24321

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
Closed
wxiaoguang opened this issue Apr 25, 2023 · 3 comments · Fixed by #24340
Closed

Gitea scrollbar in Safari is ugly #24321

wxiaoguang opened this issue Apr 25, 2023 · 3 comments · Fixed by #24340
Assignees
@silverwind
Labels
type/bug

Comments

@wxiaoguang
Copy link
Contributor

wxiaoguang commented Apr 25, 2023 •
edited
Loading

image

Gitea Version

1.19/main
@silverwind
Copy link
Member

silverwind commented Apr 25, 2023 •
edited
Loading

Can reproduce, but only in light theme. Wonder where that green is coming from, it also appears on the off-screen background when scrolling the page up with rubber-band scrolling.

@silverwind
Copy link
Member

silverwind commented Apr 25, 2023 •
edited
Loading

It comes from HTML theme-color which Safari apparently now uses to color out-of-viewport content like scrollbar or overscroll area.

@silverwind
Copy link
Member

silverwind commented Apr 25, 2023 •
edited
Loading

We could automatically to set theme-color via JS to match the current theme's --color-body so browser chrome on IOS and overflow match the body color, but that also means the color no longer be controlled via HTML, and I wonder if we should just remove the THEME_COLOR_META_TAG setting we have.

More info: https://css-tricks.com/meta-theme-color-and-trickery/

@silverwind silverwind self-assigned this Apr 25, 2023
@silverwind silverwind mentioned this issue Apr 25, 2023
Merged
techknowlogick pushed a commit that referenced this issue Apr 26, 2023
@silverwind
Don't set meta theme-color by default (#24340)
517f9f5 
Fixes #24321. By not setting
this meta tag, Safari will use body color for chrome and out-of-viewport
areas, which looks much better then static mismatching green.

As per
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
it's really only Apple browsers who still support this tag, most others
have dropped support.
@GiteaBot GiteaBot mentioned this issue Apr 26, 2023
Merged
GiteaBot pushed a commit to GiteaBot/gitea that referenced this issue Apr 26, 2023
@silverwind @GiteaBot
Don't set meta theme-color by default (go-gitea#24340)
f2fe466 
Fixes go-gitea#24321. By not setting
this meta tag, Safari will use body color for chrome and out-of-viewport
areas, which looks much better then static mismatching green.

As per
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
it's really only Apple browsers who still support this tag, most others
have dropped support.
silverwind added a commit that referenced this issue Apr 26, 2023
@GiteaBot @silverwind
Don't set meta theme-color by default (#24340) (#24346)
cc7a4f1 
Backport #24340 by @silverwind

Fixes #24321. By not setting
this meta tag, Safari will use body color for chrome and out-of-viewport
areas, which looks much better then static mismatching green.

As per
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
it's really only Apple browsers who still support this tag, most others
have dropped support.
 
Before:
<img width="347" alt="Screenshot 2023-04-25 at 19 59 13"
src="https://user-images.githubusercontent.com/115237/234363180-0fe667ef-5469-4f5f-b31a-c9d73aff10ac.png">

After:
<img width="361" alt="Screenshot 2023-04-25 at 20 00 00"
src="https://user-images.githubusercontent.com/115237/234363185-e2d2b62f-0133-4316-944d-b614ffb84eb0.png">

Co-authored-by: silverwind <[email protected]>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@silverwind silverwind

Labels
type/bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Don't set meta theme-color by default silverwind/gitea
2 participants
@silverwind @wxiaoguang