Large font awesome icons on mobile phones [confirmed on Iphone]

[wesdevpro]

Hello! I have a nuxtjs static web app I have hosted on Netlify. This web has the following config

   export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'client',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Customize the progress-bar color
  loading: { color: '#fff' },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['~/assets/scss/main.scss', '@fortawesome/fontawesome-svg-core/styles.css'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
    [
      '@nuxtjs/fontawesome',
      {
        css: true,
        icons: {
          solid: [
            'faAngleLeft',
            'faAngleRight',
            'faChartLine',
            'faCheckCircle',
            'faCog',
            'faLink',
            'faPaintBrush',
            'faUserGraduate',
          ],
          brands: ['faApple', 'faGoogle'],
        },
      },
    ],
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    [
      'nuxt-buefy',
      {
        defaultIconPack: 'fas',
        defaultIconComponent: 'FontAwesomeIcon',
        materialDesignIcons: 'false',
        defaultIconPrev: 'angle-left',
        defaultIconNext: 'angle-right'
      },
    ],
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
  target: 'static',
}

The following packages are installed

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.13",
    "sass-loader": "10.1.1",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss-html": "^1.3.0",
    "prettier": "^2.5.1",
    "sass": "^1.53.0",
    "sass-loader": "10.1.1",
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended-vue": "^1.1.0",
    "stylelint-config-standard": "^24.0.0"
  } ...

The problem is that on any iPhone the font awesome icons on any buefy component fill the screen. Am I doing something wrong? or is there a bug with nuxt-buefy or even font awesome?

[wesdevpro]

[wesdevpro]

What I have found out so far: https://stackoverflow.com/questions/72962337/large-font-awesome-icons-on-mobile-phone

[wesdevpro]

CSS applied on Desktop Chrome.

align-items center
box-sizing border-box
color rgba(0, 0, 0, 0.7)
cursor pointer
display flex
font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
font-size 16px
font-stretch 100%
font-style normal
font-variant-caps normal
font-variant-east-asian normal
font-variant-ligatures normal
font-variant-numeric normal
font-weight 400
height 24px
justify-content center
letter-spacing normal
line-height 24px
margin-left -9px
margin-right 4px
text-align center
text-indent 0px
text-rendering auto
text-shadow none
text-size-adjust 100%
text-transform none
user-select none
white-space nowrap
width 24px
word-spacing 0px
writing-mode horizontal-tb
-webkit-box-align center
-webkit-box-direction normal
-webkit-box-pack center
-webkit-font-smoothing antialiased

@jtommy

CSS applied on Iphone 11 IOS 15

background-color: transparent;
fill: currentColor;
stroke-width: 0;
stroke: currentColor;
pointer-events: none;
width: auto;
height: auto;
overflow: visible;
box-sizing: content-box;

[wesdevpro]

As of right now, I will be using MDI until this issue is resolved. MDI renders perfectly fine ✌🏼