Styles not applying correctly in Chrome 129

dauhn-kim commented 2 months ago

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

danielwong2268 commented 2 months ago

I'm seeing the same issue and noticed this in the console [Deprecation] Custom state pseudo classes have been changed from ":--range-thumb-size" to ":state(range-thumb-size)". See more here: https://github.com/w3c/csswg-drafts/issues/4805

EDIT: I think this was a red herring. After I fixed the problem, I still saw this in our console logs.

danielwong2268 commented 2 months ago

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

maniyedidi commented 1 month ago

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

dauhn-kim commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

rafael-sales-brisa commented 1 month ago

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?

aarongarciah commented 1 month ago

@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?

dauhn-kim commented 1 month ago

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 commented 1 month ago

@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?

Material UI v5

rafael-sales-brisa commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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

bobarros commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

bobarros commented 1 month ago

@aarongarciah for me is just in production.

aarongarciah commented 1 month ago

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 commented 1 month ago

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.

aarongarciah commented 1 month ago

This issue reported in Discord could be related: https://discord.com/channels/1131323012554174485/1131328913000370176/1270682781961162784

Live url: https://dev-admin.mfacilities.net/login. After a refresh, looks like the styles are applied on load and then immediately removed.

aemonm commented 1 month ago

Also seeing this in Arc browser, also Chromium based.

aarongarciah commented 1 month ago

This issue reported in Discord could be related: https://discord.com/channels/1131323012554174485/1131328913000370176/1270682781961162784

Live url: https://dev-admin.mfacilities.net/login. After a refresh, looks like the styles are applied on load and then immediately removed.

Looks like an hydration issue. The code coming from the server in https://dev-admin.mfacilities.net/login includes the corresponding <style> tags from Emotion but after load they're gone. We need to investigate more.

EliasTouil commented 1 month ago

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

@aarongarciah thank you for looking into this!

It happens in local build and prod build, also in development although less frequently.

rafael-sales-brisa commented 1 month ago

@EliasTouile outros: isso acontece apenas em compilações de produção ou também em desenvolvimento?

This occurs locally and in production after the build and the start command, however in development mode I didn't notice any errors, and in production mode the error sometimes appears and sometimes doesn't, it's inconsistent, when the error occurs, not all style is lost, I realize that native components of the material are more affected, it is as if it were a hydration error but more localized, another detail, when accessing the system on a cell phone, no errors appear, the error only appears on the desktop on google129

aarongarciah commented 1 month ago

Is anyone able to reproduce the error in Firefox or Safari? The error in https://github.com/mui/material-ui/issues/43823#issuecomment-2363894418 can be reproduced in any browser, so not sure it's the same thing.

Looks like a hydration issue. The code coming from the server in https://dev-admin.mfacilities.net/login includes the corresponding <style> tags from Emotion but after load they're gone. We need to investigate more.

It's still not clear why Emotion is removing the <style> tag associated with the Button component, so I can't confirm yet on which end this error is. All of the Emotion <style> tags are moved from the <body> the <head> after hydration (as expected), but at some point Emotion moves all of them to the start of the <head>, and in that process some <style> tags are lost.

cc @mnajdova in case you have some ideas.

bobarros commented 1 month ago

I only can reproduce on Chrome in this specific version. This is the first time I face a problem related that much to a browser update.

aemonm commented 1 month ago

Possibly related to this issue in Chromium.

sprockow commented 1 month ago

Just got burned by this issue in our production environment as well. Verified that this affects Chrome 129 specifically, and not Chrome 128 or Firefox.

However, during our investigation, we noticed that our lower environment was fine.

The only difference is that we had recently updated our CI node version from 18 to 20

      - name: Install Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"

Applied this change to our production build, and our styles are no longer broken.

Not sure as to how/why node v20 affects our build output. Still looking into the root issue, but putting it out there in case this helps.

dauhn-kim commented 1 month ago

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

Regarding the readonly prop, you're right that the Joy Typography component doesn't natively have that prop. It seems like our UI team may have extended the component or added custom props to it on our end. I'll confirm with the team once I'm back at work and provide further details.
We're using the App Router in our Next.js setup.

tylerzey commented 1 month ago

We noticed this issue as well. It was only reproducible in Chrome 129.

We were able to resolve it for now lowering one of our apps @emotion/cache from 11.13.1 to 11.12.0. And raising another apps @emotion/cache to 11.12.0.

Relevate MUI version:

"@mui/icons-material": "5.16.7",
"@mui/material": "5.15.12",
"@mui/utils": "5.16.6",
"@mui/x-charts": "7.13.0",
"@mui/x-data-grid": "7.13.0",
"@mui/x-date-pickers": "7.13.0",

Next version:

"next": "14.2.12",

I'll keep trying to create a repro in codesandbox.

abdul-moize commented 1 month ago

Sorry if this does not help or is already mentioned above. In my case styles are only lost for components that are hidden initially and rendering after a specific condition becomes true

elawad commented 1 month ago

After some trial and error was able to resolve by deleting node_modules, and pinning to 11.12.0. See https://github.com/emotion-js/emotion/issues/3256#issuecomment-2366998078

MarkusGalant commented 1 month ago

Any updates?

TurchinAC commented 1 month ago

We're facing this issue too but with styled-components. It only happen on production environment and I'm wondering - is anyone facing this issue with styled-components too?

"styled-components": "^6.0.8",
"next": "^13.4.19",

debosch commented 1 month ago

@TurchinAC same issue. I'm not using material ui, just these two "styled-components": "6.1.3", "next": "13.5.6"

jkincheloe33 commented 1 month ago

We're facing this issue too but with styled-components. It only happen on production environment and I'm wondering - is anyone facing this issue with styled-components too?
"styled-components": "^6.0.8",
"next": "^13.4.19",

yes, happening on SC as well https://github.com/styled-components/styled-components/issues/4351

rafael-sales-brisa commented 1 month ago

any update? i need to fix this bug

allanfernandesh commented 1 month ago

any update?

Mukola1983 commented 1 month ago

Update totaly broke React aplication with MUI 5. And behavior is strange, some pages brokes after reloading and other oposite first load broken and after reloading styles became normal.

jeff-0205 commented 1 month ago

I facing same issue :( I'm using MUI 5 with Next.js 14

rigobauer commented 1 month ago

Same issue here after upgrading to Chrome 129 (production completely broken). Next.js 14 (Page Router) + MUI 6 + Styled Components 6

RubenZx commented 1 month ago

Facing the same problem. Styles are completely broken in all our environments after upgrading Chrome to 129. Also Next.js v14, MUI v6 and styled-components v6.

breeeew commented 1 month ago

We just solved by speedy: false

<AppRouterCacheProvider
            options={{
              enableCssLayer: true,
              speedy: false,
            }}
....

breeeew commented 1 month ago

@jisoobigc in options prop for AppRouterCacheProvider

jeff-0205 commented 1 month ago

@breeeew Is it possible to use the same speedy option in the AppCacheProvider of the page router instead of the app router?

tylerzey commented 1 month ago

Setting speedy: false will fix it for all emotion users. That disables emotions use of CSS Insert rule.

The Chromium bug is an issue with CSS insertRule. See: https://issues.chromium.org/issues/367758074 It looks like a patch will come out for 129. And, it will be fixed in 130.

In addition to the above cache provider method, you could try using this:

https://emotion.sh/docs/cache-provider

kirand51 commented 1 month ago

also for me happens in production only, i am using styled components and sometimes styles load and some times it break UI. i checked with browserStacks with different browser versions

below 128 UI is working fine. 128 , 129 is not showing UI properly.

raRaRa commented 1 month ago

Same issue here, only happens in prod, and oddly enough it doesn't happen in pre-prod that has the same build. I downgraded from MUI 6 to 5 and deployed, which seems to have fixed things for now.

Just a side note: The prod version worked when I used Incognito window (not sure why). So it feels like it's related to the Chrome bug.

For others trying to debug this issue, try upgrading Chrome to the latest version as well and see if that solves it, and also try opening your site in Incognito mode.

mui / material-ui