position:stickyを使った時のEdgeのちらつきについて

左にメニュー、右側にメインコンテンツというレイアウトで、
左側のメニューにposition:stickyでスクロール時に固定するようにしました。

Edgeで少し速い速度でスクロールすると、メニューの表示ががたつきます。
これを解消したいのですが良い方法はないでしょうか？

やってみたこと

（１）nicescrollを試しましたが変わらなかったです。
https://github.com/inuyaksa/jquery.nicescroll
他にこのようなスクロールを補正してくれるようなプラグインはあるでしょうか？

（２）position:stickyは諦めてjsのsticky-sidebarを使ってみました。
がたつきはだいぶ解消されるのですが一番下までスクロールして上へ戻る時、スムーズにfixしてくれず、一瞬ガタッとした動きになります。
https://abouolia.github.io/sticky-sidebar/

スクロールしている時にガタつかなければposition:stickyが一番きれいに動いてくれるので、できればこちらを使いたいです。
IE11にも対応したいです。
※IE11のposition:stickyについてはstickyfilljsを使います

デモ

仕事の案件はお見せできないため、再現したものになりますが同じ現象が起きます。
https://codepen.io/takayo-nakamura/full/OJVqEyG

その後、試したもの

position:stickyを使ったときのちらつきを解消できないかいろいろ試した結果、解決できていないのですが状況報告になります。

（１）スムーススクロールの無効化
こちらを参考にjsを実装してみましたが変わらなかったです。
https://souken-blog.com/2017/08/25/ie11-smoothscroll

（２）position:fixedで起きるちらつきの対策
transform: translate3d(0,0,0);やz-indexのマイナス値などよく紹介されているものを試しましたが効果なし。
そもそもfixedでも同じ現象は起きるのか、fixedとabsoluteを試したところどちらも発生しませんでした。

stickyの問題のようなのでtransformは関係ないのかなというところです。
今のところEdgeについては諦める方向に向かっていますが解決できるなら解決したいなぁ・・そこだけなんだ・・。

Lhankor_Mhy

2020/04/02 03:08

ご提示のデモをIE11で実行したところ、エラーを吐いて何も出力されませんでした。なので、想像だけで書きますが、これが原因では。 https://qiita.com/kikuchi_hiroyuki/items/7ac41f58891d96951fa1

nakataka

2020/04/02 04:46

Lhankor_Mhyさん、ありがとうございます。実際の案件の方でスクロールイベントがあったので試してみましたが残念ながら変化はありませんでした。スクロールイベント自体を消してみたりもしましたがそれでも変化なしでした。教えていただいた情報は今後の参考にさせていただきます！勉強になりました。ありがとうございます。

Lhankor_Mhy

2020/04/02 05:21

いえ、そうではなくて、polyfillの方の話です。

Lhankor_Mhy

2020/04/02 05:57

ああ、誤読していました。問題が起きるのはEdgeなんですね。でも、まあ、Edgeは4/17までの命ですからねえ…… https://forest.watch.impress.co.jp/docs/news/1238145.html

nakataka

2020/04/02 06:32

こちらこそ、スクロールイベントのことだと勘違いしておりました；；すみません。 Edgeが変わって解消されたらとても嬉しいです。新しくなったらまた確認してみます！ありがとうございます！！

Lhankor_Mhy

2020/04/02 06:38

そうか、レンダリングの問題ではないから、解消されないかもしれないんですね。重ね重ね的外れなことを申し上げました。

行動規範の内容に同意します

回答1件

ベストアンサー

当方でご提示のコードを試してみたところ、（1）の方法が有効でした。

ただ、そのサイトのコードでは、

js
1 if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident/7./) || navigator.userAgent.match(/Edge/12./)) {
2 $('body').on("mousewheel", function () {
3 event.preventDefault();
4 var wd = event.wheelDelta;
5 var csp = window.pageYOffset;
6 window.scrollTo(0, csp - wd);
7 });
8 }

となっていましたが、当方のUAはMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18363となっていたため、12を18に変更しました。
これはアドホックなので、バージョンに依存しないようにした方がいいと思います。

ていうか、EdgeのUAってなんでこんな訳わからないことになってるんでしょうね……

投稿2020/04/02 09:29

Lhankor_Mhy

総合スコア36074

nakataka

2020/04/03 03:37

検証していただいてありがとうございます！私の環境の問題があったようで、ちらつきの現象が２つ起きていました。一つは書いていただいている通りのjsで解消されました。ありがとうございます。UAの書き方が違うんですね！もう一つのちらつき「赤背景の見出しの両端にガビついた点々」が出ます。こちらはmicrosoft Surface BookのEdgeでのみ起きる現象だとわかりました。 macに入れたparallelsのwindow10環境で確認したところ、スムーズにスクロールされました。 Surfaceの方はまだ解決できていないので4/17以降にまた確認してみます。それでダメならこれについては残念ですが諦めようかなと思います；

nakataka

2020/06/20 01:42

残っていた問題もEdgeがchromiumベースになったことにより解消されました！ Lhankor_Mhyさん、ありがとうございました！！時間が開いてしまって申し訳ありません、ベストアンサーにさせていただきました。