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

cc-badge: inconsistent border display with WebKit #630

Closed
2 tasks
florian-sanders-cc opened this issue Nov 22, 2022 · 0 comments · Fixed by #606 or #644
Closed
2 tasks

cc-badge: inconsistent border display with WebKit #630

florian-sanders-cc opened this issue Nov 22, 2022 · 0 comments · Fixed by #606 or #644
Assignees
@florian-sanders-cc
Labels
bug Something isn't working
Projects
Project board - Clever Components

Comments

@florian-sanders-cc
Copy link
Contributor

florian-sanders-cc commented Nov 22, 2022 •
edited

Context

With WebKit, the border (box-shadow) of cc-badge may look weird depending on the screen resolution, the zoom, etc.
image

We use inner box-shadow instead of a border so that badges all have the same height whether they are outlined or not.
Codepen to reproduce

Solutions

  • Use a border instead of box-shadow.
  • Use a border and blend it with the background for dimmed, strong weights.
@florian-sanders-cc florian-sanders-cc added the bug Something isn't working label Nov 22, 2022
@florian-sanders-cc florian-sanders-cc self-assigned this Nov 22, 2022
@florian-sanders-cc florian-sanders-cc added this to Discuss in Project board - Clever Components via automation Nov 22, 2022
@florian-sanders-cc florian-sanders-cc mentioned this issue Nov 22, 2022
Merged
4 tasks
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
54f855b
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
fe62b48
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
5fcedce
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
b90e430
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
c4ff293
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
a726458
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
c3a7f66
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
79d2673
florian-sanders-cc added a commit that referenced this issue Nov 22, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
9e89011
florian-sanders-cc added a commit that referenced this issue Nov 24, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
4374c80
florian-sanders-cc added a commit that referenced this issue Nov 24, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit - Fixes #630
5a4399d
florian-sanders-cc added a commit that referenced this issue Nov 28, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit
002fb7b 
Fixes #630
florian-sanders-cc added a commit that referenced this issue Nov 28, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit
8d90540 
Fixes #630
florian-sanders-cc added a commit that referenced this issue Dec 1, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit
3fd763c 
Fixes #630
florian-sanders-cc added a commit that referenced this issue Dec 1, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit
f4165c0 
Fixes #630
florian-sanders-cc added a commit that referenced this issue Dec 1, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit
ffdbee5 
Fixes #630
florian-sanders-cc added a commit that referenced this issue Dec 1, 2022
@florian-sanders-cc
fix(cc-badge): set consistent border display with webkit
48b7097 
Fixes #630
Project board - Clever Components automation moved this from Discuss to Unreleased Dec 1, 2022
@github-actions github-actions bot mentioned this issue Dec 1, 2022
Merged
@florian-sanders-cc florian-sanders-cc mentioned this issue Dec 1, 2022
Closed
@hsablonniere hsablonniere moved this from Unreleased to Done in Project board - Clever Components Dec 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@florian-sanders-cc florian-sanders-cc

Labels
bug Something isn't working
Projects
No open projects
Project board - Clever Components
Done
Milestone
No milestone
1 participant
@florian-sanders-cc