MDI Icons are huge when refreshing pages

[Torgian]

Environment

---

• Operating System: Darwin
• Node Version: v16.13.2
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: [email protected]
• Builder: webpack
• User Config: env, serverMiddleware, head, css, router, modules, plugins, build, buildModules, optimizedImages, bridge
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: @aceforth/[email protected], @nuxt/[email protected]

---

Reproduction

I cannot provide this since it is a private repository, but I am able to show a video of what is happening, and am happy to do a screen share session.

Describe the bug

When refreshing the page, some MDI icons will flash momentarily in a very, very huge size. Then, the CSS seems to "kick in" and everything returns to normal.

This occurs on every page and only when refreshing.

Additional context

I updated my project to Nuxt Bridge. I can post my dependencies here:

"dependencies": {
    "@mdi/js": "^6.5.0",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.9.5",
    "@nuxtjs/pwa": "^3.0.0-0",
    "@nuxtjs/toast": "^3.3.0",
    "@nuxtjs/vuetify": "^1.9.0",
    "chart.js": "^2.9.3",
    "cookie-universal-nuxt": "^2.0.19",
    "cross-env": "^7.0.0",
    "encoding-japanese": "^1.0.30",
    "epic-spinners": "^1.1.0",
    "exceljs": "^4.3.0",
    "lodash": "^4.7.0",
    "nuxt-edge": "latest",
    "nuxt-user-agent": "^1.2.2",
    "papaparse": "^5.3.1",
    "validatorjs": "^3.17.1",
    "vue-chartjs": "^3.5.0",
    "vue-tippy": "^4.0.3",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@aceforth/nuxt-optimized-images": "^1.4.0",
    "@nuxt/bridge": "npm:@nuxt/bridge-edge",
    "@nuxt/types": "^2.14.12",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^27.4.0",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "imagemin-pngquant": "^9.0.1",
    "imagemin-svgo": "^9.0.0",
    "jest": "^27.1.0",
    "js-yaml-loader": "^1.2.2",
    "json-loader": "^0.5.7",
    "prettier": "^2.5.1",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.0.0",
    "stylus": "^0.56.0",
    "stylus-loader": "^3.0.2",
    "vue-jest": "^4.0.0-0",
    "webp-loader": "^0.6.0"
  }
}

I am guessing that maybe there could be an incompatible module, but other than adding Nuxt Bridge and slightly modifying the configuration file, nothing has changed.

Logs

No response

[danielroe]

I think this is the same cause as #26; let's track there.

[Torgian]

I think this is the same cause as #26; let's track there.

Thanks. I'll read this issue and see if I can figure out a solution as well.