まず、解決方法。
Stack Overflowからの引用です。
Is to add
transform: translate3d(0,0,0);
こちらで解決できました。
サンプル
mix-blend-modeをかけた要素の親にoverflow:autoが適用されていて、かつスクロールが発生している場合にSafariだけmix-blend-modeの効果が適用されませんでした。
See the Pen OJZzvMB on CodePen.
上記のCodepenのサンプルでは、ピンクの四角の中に、少し大きな青い四角を少しズラして配置しています。青い方の四角にはmix-blend-mode:multiplyを適用されており、両方が重なっている部分は濃い群青色になっています。
3つ並んだサンプルは、左がoverflow無し、真ん中が親のピンクの四角にoverflow:auto、右が親のピンクの四角にoverflow:autoを適用しつつ青い四角にtransform:translate3d(0,0,0)を適用したものです。
左のoverflow無しのサンプルは、親の四角の部分はピンクに表示され、はみ出した部分は青く表示されます。mix-blend-mode:multiplyの効果で重なり部分は濃いめの群青色で表示されており、これが正常です。
また、Safari以外のブラウザでは正常に表示されています。
真ん中のサンプルは、親にoverflow:autoを追加しています。
Safariだとピンクの四角と青い四角が重なっている部分の色が左右のサンプルよりも明るく、色が乗算されていないことが分かります。
右のサンプルは、さらに青い四角の部分にtransform:translate3d(0,0,0)を追加しています。
親のoverflow:autoは生かしつつ、重なり部分も色が濃くなって乗算で描画されていることが分かります。
Safari以外のブラウザでは真ん中のサンプルも正常に表示され、また、transform:translate3d(0,0,0)で修正できることからSafariのバグであると思われます。
そのうちSafariが修正されて対策不要になるかもしれません。