IE11にてBlueprintのPopoverの背景色がおかしくなる問題の対処

はじめに

タイトルの通り、Popoverのcontentの背景色がなぜか真っ白になったり・ツラついたりする現象に遭遇したので、対処方法を共有します。

原因

IE11とPopoverが展開するcontainerのスタイルの指定が相性が悪いため。
デフォルトでは、containerには transform: translate3d(xxx, xxx, xxx) なスタイルが適用されています。

対処方法

Popoverコンポーネントのmodifiers propsに以下のようなオブジェクトを渡すことにより、この問題を回避できます。
※IE11の場合のみ、falseにするという条件分岐を入れてもいいかと思います

const hoge = {
  computeStyle: {
   gpuAcceleration: false 
  }
}

参考