Safari - “输入搜索”导致视口向左推

Question

我会尽可能地做到这一点。

我建了一个PWA。单击搜索图标时，它将向左滑动 - 没有问题。

我正在使用包含“输入搜索”的搜索功能。

我测试的每个浏览器，输入组都没有给我带来任何问题。

另一方面，当你继续使用safari时，你可以在第一次点击搜索图标，然后它将正常显示搜索。当你关闭它时，没有问题..但再次点击它，然后再次关闭它，你会看到网站/视口被推到左边。在https://logima.io（在Safari浏览器上）测试它只是为了手动查看实际问题。

我尝试了不同浏览器的相对，绝对，固定和各种盒子大小。

我花了7个小时调试问题，这绝对归结为：

    <input
      ref="search"
      id="search"
      v-model="search"
      @input="makeSearch"
      class="search-panel-input"
      :placeholder="$t('Type what you are looking for...')"
      type="text"
      autofocus="true"
    >

但是，它与代表任何样式或功能的参数无关。它只与“输入”本身有关。

3天前我买了一台全新的8GB内存Macbook Air，Safari上的开发人员工具很慢，我甚至根本无法使用它，所以我无法快速调试开发人员工具上的问题，这导致我在这里。

这可能是我创建的另一个CSS代码导致此冲突的结果。我试图找出一种方法，使我的视口不会被推到左边，无论如何。

这不是最关键的问题，因为在第一次使用时，我打算在所有浏览器上显示搜索。但Safari正在导致输入在第二次使用时将视口推向左侧，这是一个令人烦恼的问题，但却是一个有待解决的问题。

我将尝试自己调试这个造型问题，但我正在这里伸出手，因为我很肯定有一些网页设计师比我更有资格谈论在safari中的造型。

任何有关解决此问题的贡献都非常感谢！

Answer 1

奇怪的是，它似乎是由你的页脚中的div与类row引起的。

到目前为止，我已经能够通过以下方式解决这个问题：

• 将margin-left/right设置为0px（而不是-15px）
• 禁用Dev Tools中的值
• 完全从DOM中删除元素

（全部在打开搜索面板之前完成）