Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Aarebecca opened this issue Oct 25, 2023 · 1 comment
Open

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

Aarebecca opened this issue Oct 25, 2023 · 1 comment
Labels
bug Something isn't working PR Welcome

Comments

@Aarebecca
Copy link

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)
@PeachScript PeachScript added bug Something isn't working PR Welcome and removed unconfirmed labels Oct 26, 2023
@github-actions
Copy link

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,提前感谢和期待您的贡献。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working PR Welcome
Projects
None yet
Development

No branches or pull requests

2 participants