Comments (8)
We are aware of this issue, we can avoid it once all docs is migrated to use CSS variables. For example, at this moment this is done on the landing page: https://mui.com (if you refresh there is no flickering there), but it is not done in the docs pages. We have a guide on how you can avoid this in your apps in https://mui.com/material-ui/experimental-api/css-theme-variables/overview/ guide.
from material-ui.
Hey @twassim1234, thanks for the issue! Can you try to reproduce this problem somehow? I can't reproduce it myself. From the issue description, it seems you intended to attach a video, but it apparently didn't go through. That would be helpful.
from material-ui.
Hey @twassim1234, thanks for the issue! Can you try to reproduce this problem somehow? I can't reproduce it myself. From the issue description, it seems you intended to attach a video, but it apparently didn't go through. That would be helpful.
I add another video and now it's clear
from material-ui.
The rendering is done with 4 steps:
- Render light mode
- Add space for the tabbed code blocks
- Add the tab state and the code associated
- Style all the code blocks
from material-ui.
I've successfully reproduced the bug in my browser. In the video, you can see that the first attempt showed the bug mentioned , while the second attempt worked as expected. This confirms the existence of the bug.
Overview.-.Material.UI.-.Brave.2024-04-15.15-07-10.mp4
from material-ui.
I've successfully reproduced the bug in my browser. In the video, you can see that the first attempt showed the bug mentioned , while the second attempt worked as expected. This confirms the existence of the bug.
i think there is nothing changed
from material-ui.
I've successfully reproduced the bug in my browser. In the video, you can see that the first attempt showed the bug mentioned , while the second attempt worked as expected. This confirms the existence of the bug.
i think there is nothing changed
Could you please explain more what do you mean by nothing changed ? I jus t wanted to show that the bug does indeed happen but not all the time.
from material-ui.
We are aware of this issue, we can avoid it once all docs is migrated to use CSS variables. For example, at this moment this is done on the landing page: https://mui.com (if you refresh there is no flickering there), but it is not done in the docs pages. We have a guide on how you can avoid this in your apps in https://mui.com/material-ui/experimental-api/css-theme-variables/overview/ guide.
To facilitate the process, would you be open to providing some guidance or examples on how we can implement this effectively in the docs pages? Perhaps we could collaborate on improving the documentation together. Additionally, if there are any specific challenges or roadblocks you've encountered in implementing CSS variables in the docs, feel free to share, and we can work through them together.
from material-ui.
Related Issues (20)
- [docs] need for a blog about how to optimize MUI
- [material-ui][Grid] Make the v2 component version stable
- [docs-infra] Using the right to left feature with browser translators HOT 5
- [joy-ui][Select] Floating label Select HOT 4
- [material-ui][AlertTitle] Missing Typography props when using AlertTitle
- [joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color HOT 1
- [docs][material-ui] Slider in color customization playground twitches when sliding HOT 4
- [material-ui][TableRow] Exported variable 'StyledTableRow' has or is using name 'UNDEFINED_VOID_ONLY' HOT 2
- [material-ui] Button and few more components CSS styling are off when use with Bootstrap 5.3.3 HOT 1
- [system] Unnecessary media query with 0px breakpoints HOT 3
- [material-ui] How to reduce bundle size? HOT 3
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- Compatibility with React 19 types HOT 1
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation HOT 1
- [material ui] [PaginationItem] Pagination Item component crashes due to a null check missing for contrastText HOT 3
- [material-ui] CSS rule "& > *" not working for some components after the migration from v4 to v5 HOT 1
- [material-ui][Grid] faulty wrapping on firefox if container has non-integer pixel width
- [material-ui] Cannot globally override `margin`/`margin-*` CSS properties of elements represented by `Typography` HOT 3
- [material-ui][Modal] Enhanced Modals Manager with Multi-step Modal Support and Confirm Modal Component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.