Skip to content

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

@github-actions
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
@cypress
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

Archived in project

Development

Successfully merging this pull request may close these issues.

3 participants