javascript - IE11 延迟渲染直到鼠标悬停或鼠标点击 React

Question

我有这个功能，它允许用户通过在项目图标旁边添加一个橙色点来知道何时对项目执行了更改，所以如果这是一个新项目并且用户单击该图标，则会显示一个带有表单的模式，如果该表单上的任何更改都会在项目图标旁边显示橙色圆点（也是一个图标）。此功能适用于 Chrome 和 Edge，但我也支持 IE11，问题是 IE11 在执行更改时未显示橙色圆点图标。我查看了 dom 并且橙色图标在那里，但直到我单击 dom 的元素或单击应该是橙色点的部分时才可见，在那一刻橙色点出现。

以下是原始状态，当我单击评论图标时，会出现一个带有表单的模式：

<div class="action-container">
   <span class="action-comment">
      <i class="comment-icon" aria-hidden="true"></i>
   </span>
</div>

执行更改后，我在 dom 中得到了这个：

<div class="action-container">
   <span class="action-comment">
      <i class="comment-icon" aria-hidden="true"></i>
   </span>
   <span class="action-orange-dot">
      <div class="orange-dot"></div>
   </span>
</div>

但在浏览器中结果是一样的：

直到我点击橙色点应该在的位置

我有兼容的元标记，但有没有它没有区别。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

任何想法？

标签： javascriptreactjsinternet-explorer-11