🐛 [BUG] 遇到Android微信浏览器页面渲染异常问题如何解决？

houkunlin commented 1 year ago

🐛 bug 描述

使用 pro create web-app 项目运行后，创建一个页面，发现使用电脑浏览器打开正常，电脑微信打开正常，但是使用安卓手机微信打开无法正常渲染样式等。引入的 VConsole 是能够正常显示和使用的，已经排除了这个依赖的问题，先有问题，之后才按照这个依赖的。

经过测试发现，在页面中输入内容，然后发送数据，还能够正常交互，发送数据和接收数据都正常，页面的文字变化也能正常展示，就是样式不正常

安卓13，一加8T，ColorOS 13.0 F.63 版本，WeChat 8.0.33.2320

安卓手机微信截屏

电脑微信截屏

浏览器网页截屏

我在项目中增加了以下依赖，使用的是 pnpm：

    "ahooks": "^3.7.5",
    "axios": "^1.3.4",
    "nanoid": "^4.0.1",
    "react-markdown": "^8.0.5",
    "react-syntax-highlighter": "^15.5.0",
    "remark-gfm": "^3.0.1",
    "sockjs-client": "^1.6.1",
    "stompjs": "^2.3.3"

📷 复现步骤 | Recurrence steps

使用 pro create web-app 项目运行后，使用安卓手机微信打开网页

🏞 期望结果 | Expected results

💻 复现代码 | Recurrence code

© 版本信息

Ant Design Pro 版本: [e.g. 4.0.0]
umi 版本
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

chenshuai2144 commented 1 year ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

首先，根据问题的描述，该问题可能与安卓微信浏览器的内核有关，因此建议尝试更新安卓系统或者微信浏览器版本以查看是否能够解决该问题。

如果更新后仍然存在问题，则可以尝试以下操作：

确认是否存在浏览器的兼容性问题，可以参考 caniuse 网站查看所使用的 CSS、JS 特性在不同浏览器中的支持情况：https://caniuse.com/
升级相关依赖，比如使用最新版本的 React、React-DOM。
确认所使用的样式是否存在语法错误或其他问题，可以使用在线工具进行检测，例如 CSS Validator：https://jigsaw.w3.org/css-validator/
如果上述方法均未能解决问题，建议在 GitHub 上搜索该问题是否已经有其他开发者提出并得到解决，或者在相关社区中寻求帮助。

参考文献：

houkunlin commented 1 year ago

已解决，Chrome88 以下浏览器兼容问题

安装 @ant-design/cssinjs 依赖，在 app,tsx 中增加配置：

import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';

export function rootContainer(container: React.ReactElement) {
  return React.createElement(
    StyleProvider,
    {
      hashPriority: 'high',
      transformers: [legacyLogicalPropertiesTransformer],
    },
    container,
  );
}

ant-design / ant-design-pro