Fix close button inside tags on Chrome #1574
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Small issue with iOS: I can see this on both Safari and on Chrome. |
Confirmed on iPhone 14/13 with Safari/Chrome. We can't ship the v5.2.1 with this issue. |
scss/_tags.scss
Outdated
| @@ -69,6 +69,7 @@ | |||
| height: 100%; | |||
| content: ""; | |||
| background-color: currentcolor; | |||
| -webkit-mask-image: escape-svg(var(--#{$boosted-prefix}close-icon)); //stylelint-disable-line property-no-vendor-prefix | |||
There was a problem hiding this comment.
I'm really wondering why we need to add this. Autoprefixer should do it automatically since it does it already for other definitions of mask-image in our project. Wondering if it has something to do with CSS vars.
Let's keep this modification but I'm gonna try to find why it does that.
There was a problem hiding this comment.
If the content is anything else than mask-image: var(--o-close-icon); the transformation done by Autoprefixer is OK... 🤔
As soon as the CSS var is called --o-* it doesn't work 🤔
If we change $boosted-variable-prefix for instance to uuuu- or a-, it works well 🙃
There was a problem hiding this comment.
Oh I think I know where it comes from 💡
In Autoprefixer we have this kind of code mistakes: ['-khtml-', '-ms-', '-o-']. Our Boosted prefix si o-. There must be a conflict. If I change our prefix to $boosted-variable-prefix: ms- it doesn't work neither.
So I think we can keep this modification but you should add a comment in #1553 that we could remove this line when the $boosted-prefix will be removed.
There was a problem hiding this comment.
…dth` to display the close icon
|
Kudos, SonarCloud Quality Gate passed!
|
Description
Missing one vendor prefix for Chrome in order to display close button correctly.
Motivation & Context
We saw with @louismaximepiton that the close button inside some tags was missing in Chrome because there was a vendor prefix missing for this browser.
Types of change
Live previews
Checklist
npm run lint)