iOS中消失的下拉菜单问题？答案

【问题标题】：Vanishing drop down menu issue in iOS?iOS中消失的下拉菜单问题？
【发布时间】：2019-04-12 01:46:16
【问题描述】：

以下 gif 演示了我的问题：

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

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

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

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

一般的浏览器和安卓好像都还好，这个只有iOS才有。

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

【问题讨论】：

听起来确实像一个 iOS 渲染错误，一类很难诊断和修复的错误。您可以尝试将元素的不透明度设置为 0.99，这在过去对我有用。
不幸的是，这并没有为我工作。我希望有人遇到过类似的事情，并且有一些 CSS 技巧或可以尝试的东西，最终会奏效，哈哈。我担心这些可能只在浏览器中工作，但在 Salesforce 应用程序中，Salesforce 会做一些垃圾，使其无用......
是的，我假设该应用程序使用嵌入式浏览器（可能是某些 WebKit 版本），但它可能有一段时间没有更新了。

标签： javascript ios css drop-down-menu

【解决方案1】：

我终于找到了适合此类问题的方法。

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

由于 z-index 的变化，下拉菜单会迅速消失并重新出现，因此会出现轻微的瞬间抽动。

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

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

【讨论】：