Safari 中的高级搜索下拉菜单错位了

网站反馈
1

描述

右侧列的高级搜索下拉菜单出现在右上角，而不是我期望的位置

重现步骤

Screenshot 2023-11-28 at 16.52.15
Screenshot 2023-11-28 at 16.52.151405×628 53.4 KB

平台

Mac (桌面)

浏览器

Safari

4 个赞
3

好发现，这确实是个奇怪的问题。而且只有右侧的栏目出现这种情况。在使用以下 SCSS 代码利用背景图片的任何主题上都会出现这种情况：


body::before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  filter: brightness(var(--brightness));
  background-image: url($blobs-other), url($blobs-yellow), url($blue-wave);
  background-size: 103vw, 103vw, 100vw;
  background-repeat: no-repeat;
  background-position: 50% 125%, 0px 95px, 0px 175px;
  @media screen and (max-width: 1000px) {
    background-attachment: scroll;
  }
  @media screen and (max-width: 800px) {
    background-size: 103vw, 103vw, 200vw;
    background-position: 50% 125%, 0px 95px, 0px 175px;
  }
}

我注意到 air 和 graceful 主题上也有这个问题，它们都使用了这种方式。

4

我猜一下，我怀疑 filter 正在改变堆叠上下文并可能导致问题？你能想到其他方法来处理这个背景吗，jordan？

作为第一步，你能尝试去掉 filter 看看是否有效吗？

1 个赞
5

我试过了，但它不起作用。据我所知，通过 before 附加它是唯一能让它正常工作而不影响页面/滚动的方法。

6

哇，多么奇怪的错误。绝对有效但修复后会破坏它。奇怪的是，使用 ::after 而不是 :before 也 有效……

7

我尝试在检查器中测试这一点，但切换到 ::after 会隐藏背景图片。

8

哦，抱歉，我不是那个意思，那不是一个解决方案。也不是，我只是指出还有什么与这种奇怪现象有关。

基本上，任何“移除”背景图像的操作，无论是通过定位、after，还是将宽度设置为0，“修复”了下拉菜单。

1 个赞
9

乔弗里怀疑这可能是 Safari 的一个问题。真正奇怪的是，检查器显示菜单应该正确地放置在屏幕上。像素和数字都是正确的。

在 Safari 中，如果取消选中“fixed”然后再次在菜单位置中选中它，菜单就会正确显示，这可以证明这一点。

由于此类背景图像用例自 2020 年之前就已存在，我想知道这是最近才出现的，还是从未奏效过，而这是我们第一次听说。

10

我也遇到过这种情况。以前从未经历过。感觉它好像是相对于错误的视口坐标进行定位的（即使检查器中的 translate3d 坐标是正确的，它们也与实际位置不匹配），然后我们重新应用该属性，它就自行纠正了。

Safari 有很多关于 background-attached:fixed 工作不正常的提及，这可能与此有关。但没有任何猜测能提供修复方法 :cry:

我们可以将下拉菜单更改为 position:absolute，不带 translate，这样就可以工作了。我认为目前的方式一开始就有点奇怪。

1 个赞
11

是的，你说得很有道理。它应该始终位于输入框的上方或下方。也许是检测需要我们使用转换。

1 个赞
21

这现在已修复。