Nuxt.js静态站iPhone端Buefy组件Font Awesome图标异常占屏问题

基础信息 #

• 托管平台：Netlify
• 技术栈：Nuxt.js、Font Awesome、nuxt-buefy、Sass
• 临时兜底方案：故障修复前暂时切换使用MDI图标，MDI图标渲染完全正常

项目配置 #

nuxt.config.js 配置 #

export default {
  // 全局页面头配置
  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' }],
  },

  // 进度条颜色配置
  loading: { color: '#fff' },

  // 全局CSS引入
  css: ['~/assets/scss/main.scss', '@fortawesome/fontawesome-svg-core/styles.css'],

  // 渲染前执行的插件
  plugins: [],

  // 组件自动导入配置
  components: true,

  // 开发&构建模块
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module',
    [
      '@nuxtjs/fontawesome',
      {
        css: true,
        icons: {
          solid: [
            'faAngleLeft',
            'faAngleRight',
            'faChartLine',
            'faCheckCircle',
            'faCog',
            'faLink',
            'faPaintBrush',
            'faUserGraduate',
          ],
          brands: ['faApple', 'faGoogle'],
        },
      },
    ],
  ],

  // 生产模块
  modules: [
    [
      'nuxt-buefy',
      {
        defaultIconPack: 'fas',
        defaultIconComponent: 'FontAwesomeIcon',
        materialDesignIcons: 'false',
        defaultIconPrev: 'angle-left',
        defaultIconNext: 'angle-right'
      },
    ],
    '@nuxtjs/axios',
  ],

  // Axios配置
  axios: {
    baseURL: '/',
  },

  // 构建配置
  build: {},
  target: 'static',
}

已安装依赖 #

{
  "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"
  }
}

故障表现 #

所有iPhone设备访问站点时，Buefy组件内置的Font Awesome图标会异常放大、占满整个屏幕。

已排查线索 #

• 直接使用<font-awesome-icon …>标签手动渲染的图标显示完全正常，初步判断问题可能出在Buefy图标处理逻辑、Sass编译CSS环节，也可能和项目设置target: 'static'开启静态导出、SSR相关
• 不排除Safari浏览器对Font Awesome图标应用的部分CSS属性存在兼容性问题的可能

内容的提问来源于stack exchange，提问作者wesdevpro