hello-algo icon indicating copy to clipboard operation
hello-algo copied to clipboard

手机或者移动端搜索不展开问题

Open Lizhenghe-Chen opened this issue 1 year ago • 1 comments

发现应该是由于高斯模糊导致的问题 image

简单的修复如下:

.md-header {
  backdrop-filter: saturate(120%) blur(3px);
  /* Gaussian blur */
  -webkit-backdrop-filter: saturate(120%) blur(3px);
  /* Safari */
  background-color: var(--md-header-bg-color);
}

/* 移动端样式 */
@media (max-width: 1000px) {
  .md-header {
    backdrop-filter: none;
    /* 移动端禁用虚化 */
    -webkit-backdrop-filter: none;
    /* Safari 移动端禁用虚化 */
    background-color: rgba(255, 255, 255, 0.8);
    /* 使用半透明背景色 */
  }
}

Lizhenghe-Chen avatar Dec 07 '24 17:12 Lizhenghe-Chen

谢谢反馈!我希望可以在移动端保留高斯模糊效果,但目前还没有找到完美的解决方案(目前移动端 Chrome 已经正常、Safari 仍有问题)。

krahets avatar Dec 09 '24 07:12 krahets

Fixed in 40261ca762722c05393fa11fe79552ac087f4196

Tests on iPhone:

Safari: Safari

Chrome: Chrome

krahets avatar Dec 14 '24 00:12 krahets