dumi icon indicating copy to clipboard operation
dumi copied to clipboard

bug: 移动端导航栏毛玻璃效果兼容性不够

Open Aarebecca opened this issue 2 years ago • 1 comments

Version

2.2.13

OS Version

IOS 17

Node.js Version

18

Browser Version

Microsoft Edge 117.0.2045.42/ 微信 8.0.42 / Safari

Link to minimal reproduction

/

Steps to reproduce

移动端导航栏背景毛玻璃效果失效 这个效果在电脑端浏览器模拟手机端是正常的,但实际在手机上显示不正确 测试的浏览器有:

  • Microsoft Edge
  • Safari
  • 微信
  • 钉钉

排查后发现这是手机端内核版本较低,对 backdrop-filter 样式支持不够

What is expected?

移动端导航栏毛玻璃效果正常显示

What is actually happening?

移动端导航栏毛玻璃效果丢失

Any additional comments? (optional)

解决方案: 添加兼容性样式:

-webkit-backdrop-filter: blur(30px)

Aarebecca avatar Oct 25 '23 16:10 Aarebecca

Hello @Aarebecca. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please be sure to fill in the default template in the Pull Request, provide changelog/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Aarebecca,我们完全同意你的提议/反馈,欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

github-actions[bot] avatar Oct 26 '23 01:10 github-actions[bot]