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.

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

fix: [M3-8774 ] - Faux bold in Safari with <strong /> & <b /> tags #11149

Merged
merged 3 commits into from
Oct 23, 2024

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Oct 23, 2024

Description 📝

It does appear global CSS isn't picked up in Safari for <strong> and <b> tags, resulting in faux bold. This seems to happen systematically during DOM injection

Private User Image

The issue seems to stem from the browser having higher specificity over our global CSS declaration. This PR nests our strong & b CSS declaration to increase specificity, which seems to fix the problem overall

Changes 🔄

  • Increase CSS specificity for strong & b for Safari

Preview 📷

Before After
Screenshot 2024-10-23 at 09 28 17 Screenshot 2024-10-23 at 09 28 55

How to test 🧪

Verification steps

  • Pull code and verify fix in notification menu, toast notifications etc

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@abailly-akamai abailly-akamai self-assigned this Oct 23, 2024
@abailly-akamai abailly-akamai marked this pull request as ready for review October 23, 2024 13:36
@abailly-akamai abailly-akamai requested a review from a team as a code owner October 23, 2024 13:36
@abailly-akamai abailly-akamai requested review from bnussman-akamai and hkhalil-akamai and removed request for a team October 23, 2024 13:36
Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I can finally have some peace as a Safari user now 😅

Wonder if the CSS fix is best here or if it could/should be addressed in MUI

Copy link

github-actions bot commented Oct 23, 2024

Coverage Report:
Base Coverage: 87.01%
Current Coverage: 87.01%

Copy link
Contributor

@hkhalil-akamai hkhalil-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat! This also fixes the same issue in Firefox.

Wonder if the CSS fix is best here or if it could/should be addressed in MUI

I believe it's in the right spot since they are not MUI components.

@abailly-akamai abailly-akamai merged commit 27a883d into linode:develop Oct 23, 2024
22 of 23 checks passed
Copy link

cypress bot commented Oct 23, 2024

Cloud Manager E2E    Run #6725

Run Properties:  status check passed Passed #6725  •  git commit 27a883da2e: fix: [M3-8774 ] - Faux bold in Safari with `` & `` tags (#11149)
Project Cloud Manager E2E
Branch Review develop
Run status status check passed Passed #6725
Run duration 24m 50s
Commit git commit 27a883da2e: fix: [M3-8774 ] - Faux bold in Safari with `` & `` tags (#11149)
Committer Alban Bailly
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 441
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants