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

Question

我将尽其所能。

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

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

我测试过的每个浏览器，输入组都不会对我造成任何问题。

另一方面，当您进行野生动物园旅行时，您可以第一次单击搜索图标，然后它将正常显示搜索。当您关闭它时，没有问题。.但是再次单击它，然后再次将其关闭，您会看到网站/视口被推到左侧。在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"
    >

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

三天前，我购买了具有8GB内存的全新Macbook Air，而野生动物园上的开发人员工具是如此之慢，我什至根本无法使用它，因此我无法迅速调试那里的开发人员工具上的问题，这导致我在这里。

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

这不是最关键的问题，因为搜索是在我第一次使用时在所有浏览器上显示的。但是Safari导致输入使视口在第二次使用时向左移，这很烦人，但仍然是一个有趣的问题。

我将尽力调试此样式问题，但我在这里伸出援手，因为我很肯定有些网页设计师比我更有资格在野生动物园中谈论样式。

为解决此问题所做的任何贡献均受到高度赞赏！

Answer 1

奇怪的是，它似乎是由页脚中的l = [[1,2,3], [4,5,6], [7,8,9], [10,11,12]] result = [sum(column) for column in zip(*l)] print(result) # [22, 26, 30] 类In [1]: import numpy as np In [2]: arr = np.arange(10 ** 6).reshape(10 ** 3, 10 ** 3) In [3]: %timeit arr.sum(axis=0) 881 µs ± 22.2 µs per loop (mean ± std. dev. of 7 runs, 1000 loops each) In [4]: l = arr.tolist() In [5]: %timeit [sum(x) for x in zip(*l)] 76.8 ms ± 1.84 ms per loop (mean ± std. dev. of 7 runs, 10 loops each) 引起的。

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

• 将div设置为row（而不是-15像素）
• 在开发工具中禁用值
• 完全从DOM中删除元素

（所有操作在打开“搜索面板”之前完成）