Modal flickering when opened


Topic: Modal flickering when opened

pzauner asked 5 months ago

Expected behavior Modal opens just like on the Demo.

Actual behavior Modal makes twice the opacity transition when opened and closed. This only happens in firefox. I have tested in Edge and Chrome and the modal works seamlessly.

The Modal is in a Tabs Component.

I have recorded it in Firefox profiler and added the link in the Ressources. Between 1.3s and 2s it happens. It occours that the opacity css transition of the class fade is called twice. You can see this in the Marking Diagramm and in the screenshots.

The first css-transition is from the div with class "tabs-pane fade show active" and the second transition is form div with class "modal top fade show".

What's strange is, that I have tested this outside of the tabs component and this still occurs. So it's more like a react project specific thing. It also was not always like this. I check out earlier versions where I'm sure it worked, but this still occurs. So my guess is, this have to do something with package updates, because this is something I did recently. What I surely remember is, that I updated MDBoostrap to the newest version (8.0.0).

Have you seen this problem before? Why is it only in Firefox?

Resources (screenshots, code snippets etc.) https://share.firefox.dev/3youTs7

{
"name": "xxxxxxxx",
  "homepage": ".",
  "version": "0.2.0",
  "description": "xxxxxxx",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.9.11",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^29.5.5",
    "@types/node": "^20.8.4",
    "@types/react": "^18.2.28",
    "@types/react-dom": "^18.2.13",
    "apollo-upload-client": "^17.0.0",
    "chart.js": "^4.2.0",
    "graphql": "^16.8.1",
    "loadash": "^1.0.0",
    "lodash": "^4.17.21",
    "mdb-react-ui-kit": "git+https://oauth2:xxxxxxxxxx@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced",
    "moment": "^2.29.4",
    "moment-duration-format": "^2.3.2",
    "ng2-charts": "^4.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-hook-form": "^7.42.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.6.2",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "requirejs": "^2.3.6",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "keywords": [
    "template",
    "react"
  ],
  "author": "xxxxxxx",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@typescript-eslint/parser": "^5.62.0",
    "eslint": "^8.51.0",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}

Mateusz Lazaru staff answered 4 months ago

The problem occurs because we've added inline styles to the modal in release 8.0.0. Double animation comes from:

  1. inline style
  2. fade & show classes

I don't know why chrome shows it correctly and firefox does not. We will probably remove the fade class to get rid of the second animation on the firefox. Until that, you could use this as a workaround:

.modal-backdrop.fade {
  transition: opacity 0s !important;
}
.modal.fade {
  transition: opacity 0s !important;
}

pzauner answered 5 months ago

FYI, I found the issue. I rolled back to MDB version 7.2.0 and the error disappeared. So this occours only on version 8.0.0.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 8.0.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes