Next.js Discord

Discord Forum

Recent Updates and Breaking Styles

Unanswered
Cão de Castro Laboreiro posted this in #help-forum
Open in Discord
Avatar
Cão de Castro LaboreiroOP
Hi,

I have an app I work on that has next 14.2.3

We recently and seemingly out of nowhere saw all of our modals and our layout inset and our dropdowns that depend on a z-index all because out of whack. Alignments and z-indexes are no longer behaving in ways that would be expected.

Were there some changes that I need to catch up on?

58 Replies

Avatar
Anay-208
Did you upgrade to next 15?
It could be at a commit in tailwind.config.ts|js or postcss.config.js|ts
Avatar
Cão de Castro LaboreiroOP
We have not upgraded to next 15
It could be the config but that has not changed in months
Avatar
Anay-208
So it happened out of nowhere, without running any command?
Avatar
Cão de Castro LaboreiroOP
correct
Avatar
Anay-208
It could be a system related issue. maybe can you try on github codespaces?
Avatar
Cão de Castro LaboreiroOP
system issue how? as in the machine? this is happening on multiple computers in our office.
and computers outside the office
Avatar
Anay-208
Umm, it is happening in all?
Thats weird
Avatar
Cão de Castro LaboreiroOP
Correct.
We are just styling with tailwind
Avatar
Anay-208
Can you try inspecting and see if tailwind styles are being applied
Avatar
Cão de Castro LaboreiroOP
They are, All of the other styles are still being applied
Avatar
Anay-208
is the z-index style being applied?
Avatar
Mini Rex
did you commit something then it happened
Avatar
Anay-208
he already mentioned it happened out of nowhere
Avatar
Cão de Castro LaboreiroOP
I mean things are committed quite often in this project but the changes we are seeing are in parts of the project that haven't been touched.

The changes don't seem to be connected to any changes that we have been able to track down
The z-Index is applied in certain ways but now in the ways that are expected (for example, modals) and in some cases it seems like the z-Index is having no effect (for example, dropdown menus)
We have been scrambling trying to figure this out because it happened on our live product, and are wondering if any changes in our dependencies may have introduced something
Avatar
Anay-208
Can you rollback to a previous commit and check if it is working/
Avatar
Cão de Castro LaboreiroOP
I just switched to a branch that hasn't been touched in over two weeks and I'm seeing the same issues
So I don't think it's anything that's been committed
Avatar
Anay-208
This is almost impossible without a commit. Unless there is some updates to CSS.
Avatar
Cão de Castro LaboreiroOP
I don't know what to tell you haha. I'm looking it at it. There hasn't been a commit to this branch since the beginning of October
and the issues started today
Avatar
Anay-208
Was it working fine at the beginning of October
Avatar
Cão de Castro LaboreiroOP
Yes indeed
It was working fine until today
Avatar
Anay-208
Can you try doing the following:
- remove node_modules & .next
- npm i
- npm run dev
Avatar
Cão de Castro LaboreiroOP
sure that had no effect
Avatar
Anay-208
does it work if you npm run build && npm start
Can you send your tailwind config?
Avatar
Cão de Castro LaboreiroOP
/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './ui-component/**/*.{js,ts,jsx,tsx,mdx}',
    './utils/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    fontFamily: {
      comfortaa: ['Comfortaa', 'sans-serif!important'],
      poppins: ['Poppins', 'sans-serif!important'],
    },
    extend: {
      screens: {
        '3xl': '1800px',
        '4xl': '1920px',
      },
      boxShadow: {
        'bottom-only': '0 4px 6px rgba(0, 0, 0, 0.1)',
      },
      extend: {
        overflow: ['responsive', 'hover'],
      },
      colors: {
        primary: '#1976d2',
        primaryLight: '#3e8fe7',
        primaryDark: '#0758b6',
        veryPrimaryLight: '#334155',

        callsineGray: '#778da9',
        callsineLightBlue: '#0096c7',
        callsineVeryLightBlue: '#2dafda',
        callsineTextGray: '#76879D',
        callsineRed: '#FF595E',

        cyan: 'hsl(180, 66%, 49%)',
        cyanLight: 'hsl(180, 66%, 69%)',
        strongCyan: 'hsl(171, 66%, 44%)',

        lightBlue: 'hsl(233, 100%, 69%)',
        darkGrayishBlue: 'hsl(210, 10%, 33%)',
        grayishBlue: 'hsl(201, 11%, 66%)',
        veryDarkBlue: 'hsl(255, 11%, 22%)',

        darkViolet: 'hsl(257, 27%, 26%)',
        grayishViolet: 'hsl(257, 7%, 63%)',
        veryDarkViolet: 'hsl(260, 8%, 14%) ',
      },
    },
  },
  plugins: [],
};
yes the build and start had the same effect
Avatar
Anay-208
So if you inspect, are z-index styles are actually getting applied on that element/
Avatar
Cão de Castro LaboreiroOP
according to the browser, yes they show up in the inspect tab in the dev window
and even when modifying the z-index in the open dev tab no changes are applied
Avatar
Anay-208
It could be an browser update then
Can you try in a different browser?
Avatar
Cão de Castro LaboreiroOP
I did, three browsers all the same thing
this is an example of what I'm looking at. See how it is behind the table header and the table entry? This is just started happening today.
Image
and modals are no longer being placed about the layout inset
and often are pushed out of the line of vision
We are using React 18, next 14, and tailwind and it's pretty bare of UI libraries outside of that, except that we use Material for things like the date pickers and the tooltips.
the elements the dropdowns are "under" do not have a z-index at all. The dropdowns have a high z-index
With modals you can see how the black background is below the inset layout.

This is also new and seemingly random.
Image
In some cases where there is an infinite scroll, this pushes the modals below the screen. Whereas, previoulsy, the same code seemed to comfortably place the modal on top of the component with the infinite scroll
Avatar
Anay-208
The only thing you can do is that check for errors in any css, If it could be causing it, otherwise it’s near impossible, unless there is a update to CSS
A minimal repro repo would help
Avatar
Cão de Castro LaboreiroOP
The issue is that the css has not been changed, which was confirmed by back tracking multiple weeks and using the pacakges from those commits
i dont know if i will have time to create a minimal repro repo though
is this something updating next js would potentially help with or no
Avatar
Anay-208
After sending this, I'm just confused how would a min repro repo even help.

I don't think updating nextjs to 15 would help with this issue
The most I would recommend you to do, is try to fix your Css. its an error in it, but I'm not sure how.

I'm completely understanding your frustation with this weird bug.
I don't think anyone can be done, except research about the CSS Bug
Avatar
Cão de Castro LaboreiroOP
Ok thanks