javascript - iOS 中消失的下拉菜单问题？

Question

下面的 gif 演示了我的问题:

您打开下拉菜单，尝试滚动，下拉菜单消失了(没有关闭，只是……消失了)。如果您等待几秒钟，它会返回并且现在可以正常工作。

我只能在 iOS 设备上看到这个问题。 gif 录制是在 iOS 12 上的 safari 中的 iPhone XS 模拟器上。

有没有人遇到过这样的问题并且可能知道解决方法？我尝试增加 z-index，我尝试添加 -webkit-transform: translate3d(0, 0, 0); 已演示的 hack in this article , 但两者都没有产生任何运气。

我想知道是否有人比我更了解这里可能发生的情况以及如何修复它。真正的问题是这似乎只发生在 iOS 设备上的 Salesforce 1 应用程序上，所以不确定在一般情况下重现它有多容易......但希望有人有想法阻止它这样做。

一般的浏览器和 Android 似乎都很好，这只出现在 iOS 上。

当检查下拉菜单消失时，我也没有注意到 CSS 发生任何奇怪的事情，然后如果我在开发工具中修改 CSS，它突然呈现并且工作正常。这开始看起来像一些 iOS 渲染问题，似乎超出了我的控制范围，因为我一直无法找到任何阻止此问题的 CSS...

Answer 1

我终于找到了解决这类问题的方法。

在我的多选和下拉 kendo 小部件的每个“打开”事件中，我将一个“滚动”事件附加到下拉/多选的 k-list-scroller 元素。然后，滚动事件会在每次触发滚动时增加 z-index。这强制重新呈现下拉元素并且它不再消失。

由于 z-index 的变化，下拉菜单会在瞬间消失并重新出现。

一些奇怪的注释:*我无法增加 z-index，然后将其返回到其原始 z-index。出于某种原因，这并没有导致重新渲染……我只需要不断增加 z-index。

*我无法应用滚动事件然后删除其中任何一个。我最初想在打开时应用滚动事件，在第一次滚动时执行 z-index 重新渲染，然后删除滚动事件。如果再次打开下拉菜单，则重新应用滚动事件。这导致它只在第一次工作，即使每次打开下拉菜单时都应该应用滚动事件。我只需要应用滚动事件并保留它(这是在弹出式编辑器中，所以无论如何元素稍后都会被销毁)。