[PR #309] [MERGED] cobalt.css: fix blurry text on modal contents #1092

New Issue

GiteaMirror · 2025-11-09T10:05:36-06:00

GiteaMirror commented

2025-11-09 10:05:36 -06:00

📋 Pull Request Information

Original PR: https://github.com/imputnet/cobalt/pull/309
Author: @busybox11
Created: 1/8/2024
Status: ✅ Merged
Merged: 1/8/2024
Merged by: @wukko

Base: current ← Head: current

📝 Commits (1)

177fa3c cobalt.css: fix blurry text on modal contents

📊 Changes

1 file changed (+1 additions, -1 deletions)

View changed files

📝 src/front/cobalt.css (+1 -1)

📄 Description

For some reason, chromium-based browsers show blurry contents inside #popup-content divs with a double valued border-radius. It doesn't happen on Firefox.

Screenshots

(before, in prod)

(after, with fix)

(firefox is fine)

Safari still renders blurry text, though this border-radius PR does not fix it.
The translate of the transform property from the .center class is the culprit, as you can see in the two screenshots below. This might need more time to fix, that's why I didn't look into it yet. This little PR will already fix this issue for most users though.

Screenshots

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/imputnet/cobalt/pull/309 **Author:** [@busybox11](https://github.com/busybox11) **Created:** 1/8/2024 **Status:** ✅ Merged **Merged:** 1/8/2024 **Merged by:** [@wukko](https://github.com/wukko) **Base:** `current` ← **Head:** `current` --- ### 📝 Commits (1) - [`177fa3c`](https://github.com/imputnet/cobalt/commit/177fa3c150adf9dc4b081644e40a1ef67120325b) cobalt.css: fix blurry text on modal contents ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `src/front/cobalt.css` (+1 -1) </details> ### 📄 Description For some reason, chromium-based browsers show blurry contents inside `#popup-content` divs with a double valued border-radius. It doesn't happen on Firefox. <details> <summary>Screenshots</summary> ![Blurry content on Arc, before the fix](https://github.com/wukko/cobalt/assets/29630035/14f40861-19a6-4c04-842f-b08b79631aa4) > (before, in prod) --- ![Regular rendering after the fix](https://github.com/wukko/cobalt/assets/29630035/dbc39513-51a4-42ba-bd60-c63d71f423a9) > (after, with fix) --- ![Rendering fine on Firefox](https://github.com/wukko/cobalt/assets/29630035/981e5623-54bb-481c-abbd-b0f670df73b7) > (firefox is fine) </details> Safari still renders blurry text, though this border-radius PR does not fix it. The `translate` of the `transform` property from the `.center` class is the culprit, as you can see in the two screenshots below. This might need more time to fix, that's why I didn't look into it yet. This little PR will already fix this issue for most users though. <details> <summary>Screenshots</summary> ![Blurry text on Safari, in production](https://github.com/wukko/cobalt/assets/29630035/420298eb-1312-4da6-8340-a0a65c0b7d9a) --- ![After removing the `transform` property, the text isn't blurry anymore but the popup isn't centered](https://github.com/wukko/cobalt/assets/29630035/3955b177-49a1-40f0-8def-2065fd738217) </details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2025-11-09 10:05:36 -06:00

GiteaMirror closed this issue

2025-11-09 10:05:36 -06:00

GiteaMirror referenced this issue

2025-11-09 10:10:24 -06:00

[PR #1092] [CLOSED] Replace Cobalt branding with random element names #1312

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/cobalt#1092