0

I'm mind-boggled and frustrated. I've played around with bug for about half an hour and cannot figure out what I'm doing wrong. Maybe someone here has experienced this bug before and can share some light to a solution.

The Goal: To figure out why the image carousel's style order in the Elements tab in Chrome Dev Tools is switched for one of four of my pages causing the opacity to be overwritten.

Expected Result: The carousel should be displayed like it is for the other 3 pages.

Actual Result: The carousel is hidden due to ordering in Elements tab of Dev Tools.

After Initial Investigation: The style order in Elements tab is switched for the left webpage (the .carousel-item class should be second in order (bottom instead of top) but instead it is shown first in the order (at the top) causing the opacity of the .item-1-31 class to be overwritten by the opacity of the .carousel-item class.

No error messages to report!

There are 4 models pages and 3 of 4 pages are displaying the correct result.

Web Pages Side-by-side in Chrome Dev Tools

Carousel-(Specific Model) CSS Files Side-by-side

Carousel CSS

React Components JS Files Side-by-side

Update: (Edit & Partially Solved) I managed to fix the bug by changing the order of import statements specifically the CSS files in the React component file that was not showing this carousel. I would still like to understand why I had to do that to make it work because the order in the other 3 pages works as-is.

Solution

Any help is greatly appreciated. Thanks!

jay
  • 1
  • 1
  • Hi Jay, have a look at the [order of precedence of css rules](https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css). in your case it's probably rule 3. rules that appear later in the code override earlier rules if both have the same specificity. – Lars Sep 01 '21 at 21:39
  • @Lars I thought so too but then the other 3 files with identical code structure would also display the same bug. – jay Sep 01 '21 at 21:43
  • Not sure, react apps often use a bundler to minify/build a single css file, so the .css file that's fed to the browser might differ from the actual source? you could check this by inspecting the css file in your browser dev tools, To add to that, in your case i would advise you to make your css selector more specific to ensure it takes precedence. instead of relying on the order in code. something like `.carousel-wrapper .item-1-35 {...` (with space) or `.carousel-item.item-1-35 {...` (without space) would ensure the `.item-1-35` rules takes priority. – Lars Sep 01 '21 at 21:49

0 Answers0