Styles not applying correctly in Chrome 129 #43823

dauhn-kim · 2024-09-20T00:15:29Z

Steps to reproduce

Link to live example: (required)

Steps:

Update Chrome to version 129.
Run a React project using Joy UI (with default styling setup).
Observe that certain styles are either not applied or incorrectly rendered.

Current behavior

MUI components are either missing styles or the styles are not applied as expected.

Expected behavior

MUI components should render with the expected styling as they did in previous versions of Chrome.

Context

After updating Chrome to version 129, I noticed that MUI’s CSS styles are not being applied correctly. Specifically, components that were rendering and styling properly before the Chrome update are now missing or have incorrect styles applied. This issue only seems to appear in Chrome 129, as other browsers (e.g., Firefox, Safari) and older versions of Chrome continue to render the styles correctly.

Your environment

npx @mui/envinfo

  Browser: Chrome Version 129.0.xxxx

{
	"name": "digital_platform",
	"version": "0.1.0",
	"private": true,
	"browserslist": [
		"> 0.5%",
		"not dead",
		"ios >= 10",
		"chrome >= 49",
		"not ie <= 11"
	],
	"scripts": {
		"dev:pm2": "pm2 kill && yarn build:dev && pm2 start ./ecosystem.config.js --env development",
		"dev": "env-cmd -f .env.development next dev --port 443 --hostname local-test.com --experimental-https",
		"build": "env-cmd -f .env.production next build",
		"start": "next start --port 3100",
		"lint": "next lint",
		"format": "prettier --write ./src",
		"test": "jest"
	},
	"dependencies": {
		"@mui/joy": "5.0.0-beta.32",
		"next": "14.2.3",
		"react": "^18",
		"typescript": "^5.3.2"
	},
	"devDependencies": {
		"@storybook/addon-essentials": "^8.1.3",
		"eslint": "^8.55.0",
		"jest": "^29.7.0",
		"typescript": "^5.3.2"
	}
}

Search keywords: Chrome 129, CSS cache, Emotion styles, Joy UI

Other reports

https://mui.zendesk.com/agent/tickets/22508

The text was updated successfully, but these errors were encountered:

danielwong2268 · 2024-09-20T03:12:26Z

We were on Material UI v5 and upgraded to Material UI v6. Surprisingly nothing broke for us. This fixed the issue.

maniyedidi · 2024-09-20T08:23:06Z

I am also facing the same issue with Material UI v5 with chrome 129. Any solution to fix in Material UI v5.

dauhn-kim · 2024-09-20T09:17:44Z

We were on MUI 5 and upgraded to MUI 6. Surprisingly nothing broke for us. This fixed the issue.

Hey, thanks for the suggestion! We’re currently using Joy UI 5.0.0-beta.32, so the upgrade to Material UI v6 doesn’t seem applicable here. We’ll keep digging into the issue, but if you’ve got any tips for Joy UI specifically, we’d love to hear them!

aarongarciah · 2024-09-20T09:27:45Z

Hi @dauhn-kim, can you expand a bit on which styles are not applying correctly? A reproduction (CodeSandbox or Stackblitz) would be ideal so we test in isolation. I'm navigating the Joy docs in Chrome 129 and I can't find anything out of the ordinary.

aarongarciah · 2024-09-20T09:28:27Z

Also, can you confirm this is only happening in Joy UI?

rafael-sales-brisa · 2024-09-20T11:17:14Z

I'm having a similar problem, I'm using Material UI v5 and in my production system there is a loss of styles with Google 129, in other versions of Google there are no problems. No error message appears in the browser console, what should I do?

dauhn-kim · 2024-09-20T11:43:05Z

Hi @dauhn-kim, can you expand a bit on which styles are not applying correctly? A reproduction (CodeSandbox or Stackblitz) would be ideal so we test in isolation. I'm navigating the Joy docs in Chrome 129 and I can't find anything out of the ordinary.

@aarongarciah
Thanks for your response! Currently, I’m unable to set up a CodeSandbox due to some limitations on my end, but I wanted to share one of the key issues we’re facing. Specifically, with Typography, the readonly property is not being applied correctly in Chrome 129. It seems like the issue spans multiple styles, but this is one that stands out.

Let me know if that helps narrow down the issue or if you need more details.

Thanks again!

rafael-sales-brisa · 2024-09-20T11:46:17Z

@rafael-sales-brisa by MUI 5, do you mean Material UI v5 or Joy UI v5? Can you share a reproduction or describe the exact problem?

Until last week my system was working normally, I'm using next.js 13.4.5 with @mui/material": "^5.13.5", I'm using the pages directory from next, suddenly I noticed that it started to break in production, I mean, some components were losing styling, as if it were a hydration problem , however, errors did not appear in the console, when I put Google in a previous version the problems disappeared, these problems were intermittent, sometimes they appear and sometimes they don't, but this only started to happen with this new version of Google

aarongarciah · 2024-09-20T12:32:54Z

Specifically, with Typography, the readonly property is not being applied correctly in Chrome 129

@dauhn-kim

The Typography component from Joy doesn't have a readonly prop. I don't understand this.
Are you using the pages or app router with Next.js?

aarongarciah · 2024-09-20T12:34:14Z

@danielwong2268 @maniyedidi are you using Next.js as well? pages or app router? Can you share a reproduction?

bobarros · 2024-09-20T13:03:07Z

I have the same issue using Next.js pages.

"dependencies": {
    "@emotion/react": "11.4.1",
    "@emotion/server": "11.4.0",
    "@emotion/styled": "11.3.0",
    "@mui/icons-material": "^5.0.3",
    "@mui/lab": "^5.0.0-alpha.50",
    "@mui/material": "^5.5.1",
    "@types/react-dom": "^18.3.0",
    "next": "^14.2.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
},

EliasTouil · 2024-09-20T13:50:26Z

Also, can you confirm this is only happening in Joy UI?

Hey @aarongarciah :)

We're facing the same issue with Material UI v6.
We first thought it was a problem with joy so we removed it in the few places we used it but that wasn't the solution :/

It's freaky as it happens irregularly, something like 1 out of 8 loads, and not on all devices running chrome 129.

"dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@fullstory/browser": "^1.6.2",
    "@hookform/resolvers": "^2.9.10",
    "@mui/icons-material": "^6.1.1",
    "@mui/joy": "^5.0.0-beta.48",
    "@mui/material": "^6.1.1",
    "@sentry/nextjs": "^7.80.1",
    "@stripe/react-stripe-js": "^2.7.3",
    "@stripe/stripe-js": "^1.42.1",
    "date-fns": "^3.6.0",
    "launchdarkly-react-client-sdk": "^3.0.8",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.51.0",
    "react-number-format": "^5.1.1",
    "react-swipeable": "^7.0.1",
    "recoil": "^0.7.6",
    "whatwg-fetch": "^3.6.19",
    "yup": "^0.32.11"
}

Here are some other things we tried without much success

updated emotion
updated MUI to 6.1.1
updated joy beta-30 -> beta-48
updated NextJS from 12 to 13

maniyedidi · 2024-09-20T13:51:31Z

I am using React 18 with Material UI v6 . issue same as @bobarros posted , Stytles not coming for button with variant="contained" .style loading properly for variant="text".
Issue present in checkbox's SVG icons and few other components
"@mui/icons-material": "^5.16.5",
"@mui/material": "^5.16.5",
"@mui/styles": "^5.16.5",
"@mui/x-date-pickers": "^5.0.11",

aarongarciah · 2024-09-20T14:02:24Z

@EliasTouil and others: does it happen only in production builds or also in development?

bobarros · 2024-09-20T14:04:31Z

@aarongarciah for me is just in production.

aarongarciah · 2024-09-20T14:16:45Z

The ones using Material UI, are you using CSS vars? In v5, that is enabled using the CssVarsProvider; in v6 it's enabled using setting cssVariables: true in the theme.

Sorry for all the questions but I can't reproduce the issue and I need more info to be able to debug. If anyone is able to provide a reproduction (CodeSanxbox, Stackblitz, repo or url) it'd be very helpful.

bobarros · 2024-09-20T14:19:54Z

I'm not using any CSS vars. I tried updating next js, mui and emotion to latest versions.
I also tried to added the css on server side, updating app and document, and no success.

cpramshad · 2024-09-24T13:13:36Z

Same here. UI is broken because of MUI not applying styles properly in chrome browser version
Chrome is up to date Version 129.0.6668.59 (Official Build) (arm64)

"dependencies": {
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
"@mui/material": "^5.10.0",
"stylis": "4.0.13"
},

DusanStojanovic-gowago · 2024-09-24T13:24:55Z

Disabling/Removing the injectFirst feature from the <StyledEngineProvider>... solved the issue in my case.

- <StyledEngineProvider injectFirst>
+ <StyledEngineProvider>

allanfernandesh · 2024-09-24T13:26:34Z

any updates?

DqPatrick · 2024-09-24T13:27:36Z

Just stumbled across this bug by accident. I can confirm the observations made in this thread:

Tech tree:
- NextJS v14.2.13
- React v18.3.1
- @mui/material v6.1.1
- @emotion/react v11.13.3

- Edge v129.0.2792.52

The issue is appearing randomly out of several page reloads
Using @mui components the issue is only showing in the production build
Updating to @mui version > v6 does not fix the issue
The issue only appears on Edge (Chromium based) or any chromium based browsers. Safari and Firefox seem to be just fine

LiamMcCusker-MSS · 2024-09-24T14:14:14Z

We are also experiencing the same issue. Elements of our site have significant styling issues on the latest version of Chrome. We are also experiencing dropdowns that don't work correctly. We are on MUI version 5. This is impacting users on our live websites.

Is there any update on how long away a fix is?

davidhancockilfracombe · 2024-09-24T14:54:55Z

One of our products is hitting this issue. Serious styling issues on the latest Chrome.

MUI version 5.
Impacting live deployments.
Chrome@latest.

rbarreror · 2024-09-24T15:02:13Z

I have the same issue. Style of some MUI 5 components is strongly distorted in production (not in dev) after updating to the latest version of Chrome and Edge.

elawad · 2024-09-24T16:02:47Z

@cpramshad and whoever else is it may help.

You have to explicitly add/pin @emotion/cache to 11.12.0.

Run yarn why @emotion/cache or npm list @emotion/cache to see which version you have.

See emotion-js/emotion#3256 (comment)

mcse3010 · 2024-09-24T19:53:52Z

FYI - This appears to be fixed in Chromium and is live in at least as early as Chrome 129.0.6668.71 possibly earlier, but was definitely broken in 129.0.6668.59. The bug was introduced in the v8 javascript engine, and was reverted here:
https://chromium-review.googlesource.com/c/v8/v8/+/5887185

Good luck!

larswittenberg · 2024-09-25T07:06:54Z

FYI - This appears to be fixed in Chromium and is live in at least as early as Chrome 129.0.6668.71 possibly earlier, but was definitely broken in 129.0.6668.59. The bug was introduced in the v8 javascript engine, and was reverted here: https://chromium-review.googlesource.com/c/v8/v8/+/5887185

Good luck!

That's right. I have just updated my Chrome browser to version 129.0.6668.71. Now the bug no longer occurs in my project.

DqPatrick · 2024-09-25T07:08:08Z

In addition to @elawad 's answer: Since the edge browser did not release an update until now, using NextJS @ v14... the integration of the AppCacheProvider or AppRouterCacheProvider (see: https://mui.com/material-ui/integrations/nextjs/) seems to fix the problem.

aarongarciah · 2024-09-25T07:59:47Z

Thanks everyone for reporting and helping out. We'd appreciate if more people can try updating Chrome to 129.0.6668.71 and confirm the bug is gone.

LiamMcCusker-MSS · 2024-09-25T08:03:04Z

Just updated the chrome version and is fixed for us on the new version. Still looks to be the same in Edge.

rbarreror · 2024-09-25T08:08:31Z

I updated Chrome to version 129.0.6668.71 and the bug is gone. However, the bug still appears in Microsoft Edge for Business (version 129.0.2792.52).
Many thanks!

dauhn-kim · 2024-09-25T08:15:34Z

Thanks everyone for reporting and helping out. We'd appreciate if more people can try updating Chrome to 129.0.6668.71 and confirm the bug is gone.

@aarongarciah

I initially resolved the issue by explicitly pinning @emotion/cache to version 11.12.0, which seemed to fix the style problems I was encountering. After that, I updated Chrome to Version 129.0.6668.71, and so far, I haven't seen any further style issues.

However, upon further investigation, I realized that this issue was caused by a bug in Chromium's V8 engine, which has since been fixed in the latest version of Chrome. I want to thank the MUI team and the community for their continued support and helpful feedback. I apologize for initially attributing this problem to MUI, as it appears the issue was specific to the browser and not the library. Thanks again to everyone involved for your help and insights!

Harshdeep-Yadav · 2024-09-25T12:33:33Z

Steps to reproduce

Link to live example: (required)

Steps:

Update Chrome to version 129.

Run a React project using Joy UI (with default styling setup).

Observe that certain styles are either not applied or incorrectly rendered.

Current behavior

MUI components are either missing styles or the styles are not applied as expected.

Expected behavior

MUI components should render with the expected styling as they did in previous versions of Chrome.

Context

After updating Chrome to version 129, I noticed that MUI’s CSS styles are not being applied correctly. Specifically, components that were rendering and styling properly before the Chrome update are now missing or have incorrect styles applied. This issue only seems to appear in Chrome 129, as other browsers (e.g., Firefox, Safari) and older versions of Chrome continue to render the styles correctly.

Your environment

npx @mui/envinfo
{
	"name": "digital_platform",
	"version": "0.1.0",
	"private": true,
	"browserslist": [
		"> 0.5%",
		"not dead",
		"ios >= 10",
		"chrome >= 49",
		"not ie <= 11"
	],
	"scripts": {
		"dev:pm2": "pm2 kill && yarn build:dev && pm2 start ./ecosystem.config.js --env development",
		"dev": "env-cmd -f .env.development next dev --port 443 --hostname local-test.com --experimental-https",
		"build": "env-cmd -f .env.production next build",
		"start": "next start --port 3100",
		"lint": "next lint",
		"format": "prettier --write ./src",
		"test": "jest"
	},
	"dependencies": {
		"@mui/joy": "5.0.0-beta.32",
		"next": "14.2.3",
		"react": "^18",
		"typescript": "^5.3.2"
	},
	"devDependencies": {
		"@storybook/addon-essentials": "^8.1.3",
		"eslint": "^8.55.0",
		"jest": "^29.7.0",
		"typescript": "^5.3.2"
	}
}
Search keywords: Chrome 129, CSS cache, Emotion styles, Joy UI

Other reports

https://mui.zendesk.com/agent/tickets/22508

Mine is working for few parts of the website after updating the MUI version to 6 but not for whole all website , changing again and again

josevsgeon · 2024-09-26T04:22:38Z

I updated Chrome to version 129.0.6668.71 and the bug is gone. However, the bug still appears in Microsoft Edge for Business (version 129.0.2792.52). Many thanks!

issue is still present in Chrome v129.0.6668.71

observed in MuiStepper (StepConnector is missing styles):

Note: @mui/material@5 is used

aarongarciah · 2024-09-26T07:18:00Z

@Harshdeep-Yadav @josevsgeon can you send a reproduction, repo or at least the dependency versions you're using?

OlegSaidov · 2024-09-26T09:01:29Z

Hi Everyone, we have a React app and it is currently failing after the Chrome update to 129.0.6668.60. According to the thread I have updated to 129.0.6668.71, but the issue didn't get fixed for us.
The problem is that React UI fails upon interaction, ex: clicking. There are no errors in the console, or network tab, but I see a white screen. However as soon as I change window size, (by opening inspector), the white screen disappears, and I see the app UI.
This issue repeats again on click, and gets fixed again on resize.
Thankfully, the issue is not observed in Edge yet.
What ever you did, please bring back Chrome we used to love.
Can't share the repo.
Thank you.

aarongarciah · 2024-09-26T09:16:24Z

@OlegSaidov we need a minimal reproduction, otherwise we can't possibly know what's happening.

OlegSaidov · 2024-09-26T09:25:49Z

@OlegSaidov we need a minimal reproduction, otherwise we can't possibly know what's happening.

Thank you for quick reply @aarongarciah , we have a custom UI toolkit, it is not Material UI, that why I was not able to share reproduction code. This was the only place where this Chrome version issue was being discussed. I have to dig every component and find which one causing the issue, and then I will have more info to share. Thank you.

josevsgeon · 2024-09-26T10:17:57Z

@Harshdeep-Yadav @josevsgeon can you send a reproduction, repo or at least the dependency versions you're using?

reproduction will take some time, here are the dependency versions:

    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/material": "^5.16.1",
    "@mui/material-nextjs": "^5.16.1",
    "@mui/x-data-grid": "^6.20.3",
    "@mui/x-date-pickers": "^6.20.2",
    "next": "^14.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",

babyguns · 2024-09-26T14:59:08Z

any have solution for this :(
I got lost css on select

thibaudgilles · 2024-09-26T22:08:05Z

I had a similar issue on Edge, Chrome was working fine.
Style issue on textfields and in production environment only
I'm using pages next.js.
next: 14.2.5
@mui/material : 5.16.1

Fixed the issue by wrapping the elements under AppRouterCacheProvider in _app.js as https://mui.com/material-ui/integrations/nextjs/ says

aarongarciah · 2024-09-27T07:21:00Z

Please, when reporting an issue, try to provide a minimal reproduction or at least provide the exact browser version and dependency versions you're using. Otherwise we can't do much. This looks like it was resolved in Chrome v129.0.6668.71, but send us reproductions in case the issue is still present. The issue might still be present in browsers running an older Chromium version (Edge, Arc, etc.).

Brandonitas · 2024-09-27T15:05:50Z

I had the same issue with styled components in chrome. After I updated to versión 129.0.6668.71 the problem was fixed.
Try to update to the latest versión of Chrome.

I'm using styled components with nextjs v13

aarongarciah · 2024-10-01T10:42:28Z

The Chromium bug was fixed in 129.0.6668.71, closing this.

github-actions · 2024-10-01T10:42:40Z

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @dauhn-kim! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

dauhn-kim added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 20, 2024

This comment was marked as resolved.

Sign in to view

aarongarciah self-assigned this Sep 20, 2024

aarongarciah added the package: joy-ui Specific to @mui/joy label Sep 20, 2024

aarongarciah changed the title ~~MUI CSS Not Applying Correctly After Chrome 129 Update~~ Joy styles not applying correctly in Chrome 129 Sep 20, 2024

aarongarciah added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 20, 2024

This comment was marked as resolved.

Sign in to view

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Sep 20, 2024

This comment was marked as resolved.

Sign in to view

aarongarciah changed the title ~~Joy styles not applying correctly in Chrome 129~~ Styles not applying correctly in Chrome 129 Sep 20, 2024

aarongarciah added the package: material-ui Specific to @mui/material label Sep 20, 2024

frano-m mentioned this issue Sep 26, 2024

Giant icons sometimes show DataBiosphere/data-browser#4162

Open

aarongarciah closed this as completed Oct 1, 2024

Styles not applying correctly in Chrome 129 #43823

Styles not applying correctly in Chrome 129 #43823

Comments

dauhn-kim commented Sep 20, 2024 • edited Loading

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

Other reports

This comment was marked as resolved.

danielwong2268 commented Sep 20, 2024 • edited by oliviertassinari Loading

maniyedidi commented Sep 20, 2024 • edited by oliviertassinari Loading

dauhn-kim commented Sep 20, 2024 • edited by oliviertassinari Loading

aarongarciah commented Sep 20, 2024 • edited Loading

aarongarciah commented Sep 20, 2024

rafael-sales-brisa commented Sep 20, 2024 • edited by oliviertassinari Loading

This comment was marked as resolved.

dauhn-kim commented Sep 20, 2024

This comment was marked as resolved.

rafael-sales-brisa commented Sep 20, 2024 • edited Loading

aarongarciah commented Sep 20, 2024

aarongarciah commented Sep 20, 2024

bobarros commented Sep 20, 2024 • edited Loading

EliasTouil commented Sep 20, 2024 • edited by oliviertassinari Loading

maniyedidi commented Sep 20, 2024 • edited by oliviertassinari Loading

aarongarciah commented Sep 20, 2024

bobarros commented Sep 20, 2024 • edited by oliviertassinari Loading

aarongarciah commented Sep 20, 2024

bobarros commented Sep 20, 2024

cpramshad commented Sep 24, 2024 • edited Loading

DusanStojanovic-gowago commented Sep 24, 2024

allanfernandesh commented Sep 24, 2024 • edited Loading

DqPatrick commented Sep 24, 2024 • edited Loading

LiamMcCusker-MSS commented Sep 24, 2024

davidhancockilfracombe commented Sep 24, 2024

rbarreror commented Sep 24, 2024

elawad commented Sep 24, 2024

mcse3010 commented Sep 24, 2024

larswittenberg commented Sep 25, 2024

DqPatrick commented Sep 25, 2024 • edited Loading

aarongarciah commented Sep 25, 2024

LiamMcCusker-MSS commented Sep 25, 2024

rbarreror commented Sep 25, 2024

dauhn-kim commented Sep 25, 2024 • edited Loading

Harshdeep-Yadav commented Sep 25, 2024

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

Other reports

josevsgeon commented Sep 26, 2024 • edited Loading

aarongarciah commented Sep 26, 2024

OlegSaidov commented Sep 26, 2024 • edited Loading

aarongarciah commented Sep 26, 2024

OlegSaidov commented Sep 26, 2024 • edited Loading

josevsgeon commented Sep 26, 2024

babyguns commented Sep 26, 2024

thibaudgilles commented Sep 26, 2024 • edited Loading

aarongarciah commented Sep 27, 2024

Brandonitas commented Sep 27, 2024

aarongarciah commented Oct 1, 2024

github-actions bot commented Oct 1, 2024

dauhn-kim commented Sep 20, 2024 •

edited

Loading

danielwong2268 commented Sep 20, 2024 •

edited by oliviertassinari

Loading

maniyedidi commented Sep 20, 2024 •

edited by oliviertassinari

Loading

dauhn-kim commented Sep 20, 2024 •

edited by oliviertassinari

Loading

aarongarciah commented Sep 20, 2024 •

edited

Loading

rafael-sales-brisa commented Sep 20, 2024 •

edited by oliviertassinari

Loading

rafael-sales-brisa commented Sep 20, 2024 •

edited

Loading

bobarros commented Sep 20, 2024 •

edited

Loading

EliasTouil commented Sep 20, 2024 •

edited by oliviertassinari

Loading

maniyedidi commented Sep 20, 2024 •

edited by oliviertassinari

Loading

bobarros commented Sep 20, 2024 •

edited by oliviertassinari

Loading

cpramshad commented Sep 24, 2024 •

edited

Loading

allanfernandesh commented Sep 24, 2024 •

edited

Loading

DqPatrick commented Sep 24, 2024 •

edited

Loading

DqPatrick commented Sep 25, 2024 •

edited

Loading

dauhn-kim commented Sep 25, 2024 •

edited

Loading

josevsgeon commented Sep 26, 2024 •

edited

Loading

OlegSaidov commented Sep 26, 2024 •

edited

Loading

OlegSaidov commented Sep 26, 2024 •

edited

Loading

thibaudgilles commented Sep 26, 2024 •

edited

Loading