Macの他の要素に影響を及ぼすCSSミックスブレンドモード

Question

複雑なWordPressページで問題が発生する可能性があるため、これは難しい問題です。

私が問題と思われるものを作成することで問題は再現されませんでした。

今のところ、問題が発生しているページの抽出が十分でなければならないので、質問をdownvoteすることを検討する前に、根本的な原因がわかったら質問をフィドルで更新するつもりですそのバグが引き起こされます。より大きな利益のために規則を少しでも一時的に曲げていただき、ありがとうございます。

問題が残っているか解決されるか、ここで回答が提供されるまでの間に、遅い要素を取り除くというプロセスに着手することに注意してください。

一時的な質問一般に

：ミックスブレンドモードは、Mac上のChromeの親要素に影響を与えます。これは、ページを越えて広がったり固定されたりしている要素に影響するようです。絶対配置された要素との関係があるかもしれません。この段階ではすべてが少し曖昧に聞こえますが、私は答えを見つけることに近づくため、より良い質問です。

私はGoogleのフォーラムでバグレポートを提出しますが、これはCSSの回避策があることを指摘する価値はありますので、問題は残っています。私は約6ヶ月前に別のサイトでそれを解決しました。残念ながらサイトはもはや存在しないので、私はそれをどのように修正したのか分かりません。ここで

例

は、WordPressの管理バーが影響を受けた上でa partially stripped-down pageです。黒の管理バーは、要素の上にマウスを置くと点滅します。

この例では、HTMLとCSSを抽出し、問題が停止するまで要素を削除してから、問題を残すために1つの要素で削除を巻き戻しました。

エクストラ

物事をより複雑にするには、問題は「オブザーバー効果」のある程度とやや断続的です。要素を調べると、問題が解決することがあります。

これはMac Chrome固有のバグですが、1年以上のアップデートでは解決されていません。 Firefox、Safari、またはWindows版のChromeでは表示されません。

もう一度おねがいします。私は、答えを見つけることだけでなく、質問を改善することも楽しみにしています。

Answer 1

これは、問題が何であるかについてはっきりとしたバグではなく、正確なCSSの原因と回避策について厳密には問いません。私は良い答えがあると確信しています、そして、それが見つかると、それを幸せに正しいものとしてマークします。

ただし、現在は..

これは、回避策として動作します。

は、要素の前ホバー状態にミックスブレンドモードを設定しないでください。

代わりに、デフォルトの移行タイミングをゼロにして、ホバー状態でmix-blend-modeを設定してください。その後、特にバックグラウンド・プロパティーにのみトランジション・タイミングを設定します。

このように、フリッカーのバグは瞬時であり、したがって見えません。