Certain css properties not supported on all browsers
Open
Nobody has claimed this yet.
bug
triage
- Dominant language
- TypeScript
- Stars
- 29k
- Forks
- 4k
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 71
Description
Bug description
Squares appear for icons that have the CSS properties mask-image, mask-repeat and mask-position, and those aren't supported on around 8% of browsers: https://caniuse.com/css-masks
How to reproduce
- Try a gitbook site out one of the non supported browsers
See the icons here on the dropdown chevron and the search icon:
Additional context
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the dropdown chevron and search icon issue in a browser that does not support mask-image, mask-repeat, or mask-position, then search the frontend styles for those properties. Done means the affected icons render correctly without squares in unsupported browsers while remaining correct in supported browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100