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

Fix close button inside tags on Chrome #1574

Merged
merged 4 commits into from
Oct 27, 2022
Merged

Fix close button inside tags on Chrome #1574

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8caa30
Fix close button inside tags on Chrome
MewenLeHo Oct 26, 2022
2f0e4b1
Remove padding to avoid weird shape in iOS + use mask and add `min-wi…
louismaximepiton Oct 27, 2022
55aded1
.
louismaximepiton Oct 27, 2022
9a6340d
Avoid small viewport issues
louismaximepiton Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scss/_tags.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

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

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.

Copy link
Member

@julien-deramond julien-deramond Oct 27, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

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 🙃

Copy link
Member

Choose a reason for hiding this comment

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

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.

Copy link
Member

Choose a reason for hiding this comment

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

See postcss/autoprefixer#1484

mask-image: escape-svg(var(--#{$boosted-prefix}close-icon));
mask-repeat: no-repeat;
mask-position: 50%;
Expand Down