[FlexGrid] マウスカーソルのある行のCSSを変更した場合、マウス移動するたびに再描画処理が行われてちらつく

文書番号 : 81895     文書種別 : Limit
登録日 : 2016/12/05     最終更新日 : 2017/05/12

対象製品

Wijmo 5

詳細

マウスカーソルのある行のcssClassを設定し、背景色を変更する処理とした場合、FlexGrid上の行をまたぐようにマウス移動するたびに再描画処理が行われて、ちらつきが発生します。
ちらつきは、テンプレートセルを使用している場合に特に顕著に表れます。

この現象は制限事項です。
行のcssClassを設定した場合、再描画が行われます。

【再現手順】
1. FlexGrid上の行をまたぐようにマウス移動します。
結果:チェックボックスとリンクが配置されたセルの表示がちらつきます。

サンプル

回避方法

下記コードのようにCSSを設定します。

◆サンプルコード(CSS)
----------------------------------
#hoverRow [wj-part=cells] {
  overflow: hidden;
}
#hoverRow .wj-cell:not(.wj-header):hover {
  overflow: visible;
}
#hoverRow .wj-cell:not(.wj-header):after {
  content: '';
  position: absolute;
  top:0;
  left:-10000px;
  width:20000px;
  height:100%;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  transition: all;
}
#hoverRow .wj-cell:not(.wj-header):hover:after {
  background: rgba(0,150,0, 0.15);
  transition: all;
}
----------------------------------

◆サンプルコード(HTML)
----------------------------------
<wj-flex-grid id="hoverRow" control="flex" items-source="data">
  ...
  ...
  ...
</wj-flex-grid>
----------------------------------