[Avatar] Show tips or implement contain CSS property
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
Well, I wrote big react JS module will exploit CSS performance to the fullest, after having had some headaches I figured out that when the image load inside MUI avatar root, well,my module freezed for a few seconds, it is not just poor code my side, or maybe event not at all, but it has enabled me to discover that contain: "strict", property and value make it being not impacting style and layout of completely not-so-random other items on the page, way faster and it avoid confusion (of course not for programmer but for the browser!)
Examples 🌈
https://wallet.crypto.red/gallery/newest/search/halo/@primerz/20211109t171813474z-crypto-red
(Code may be patched soon, so it will not have this issue, but the same context)
Motivation 🔦
".MuiAvatar-root": {
contain: "strict",
},
Is infinity percent faster (compared to a few ms freezed css)
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 at the MUI Avatar component and its .MuiAvatar-root styling entry point, then reproduce the reported freeze using the linked example. Determine whether guidance or contain: strict is appropriate, and document a clear performance result or agreed behavior when the investigation is complete.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100