CSS mix-blend-mode affects other elements on Mac Chrome
This is a bit of a tricky question to create a fiddle as the problem could be any number of things on a complex WordPress page.
Scripting what I thought might be the problem did not replicate the problem.
You can now extract the extract of the page the issue is on, so before looking at the question below, please know that I intend to update the question with a fiddle as soon as I know what the root cause is what is causing the error ... Thank you in advance for allowing the rules to be twisted slightly and temporarily for greater benefit.
Please note that I will proceed with the slow process of erasing items until the problem remains or is resolved, or an answer is provided here, whichever comes first.
Temporary question
Overall: mix-blend-mode affects parent elements in Chrome on Mac. This seems to be affecting elements that go off-page and / or are captured. There may be something to do with absolutely positioned elements. It sounds a little vague at this point, but I'm getting closer to finding an answer and therefore a better question.
I'll post a bug report on the Google forums, although it's worth noting that this has a CSS workaround, so the question remains relevant. I managed to solve this on another site about 6 months ago. Unfortunately the site doesn't exist anymore, so I can't find out how I fixed it.
Example
Here's a partially stripped-down page that has been influenced by the WordPress admin panel. The black admin bar blinks and turns on when you hover over items.
I made this example by fetching the HTML and CSS and then deleting the elements until the problem is complete, then rewinding my deletion with one element to keep the problem.
Extra
To complicate matters, the problem is somewhat intermittent, with some degree of "observer effect". Sometimes checking this item fixes the problem.
I'm pretty sure this is a Mac Chrome bug, although it hasn't been resolved in over a year of updates. It doesn't show up in Firefox, Safari, or the Chrome versions of Chrome.
Thanks again. I am looking forward - not only to find an answer, but to improve the question.
source to share
This is not a strict answer to the question of what the problem is - seeing how it is clearly a bug, and what the exact CSS cause and workaround is. I am sure there is a better answer and I will happily mark it as correct as soon as it is found.
However, at the moment ..
This works as a workaround:
Do not set the blend mode to pre-hover element.
Instead, set mix-blend-mode in hover mode with default sync to zero. Then set the transition time to only the background property.
Thus, the flicker error is instantaneous and therefore not visible.
source to share