3

This is a bit of a difficult question to create a fiddle for since the problem could be any number of things on a complex WordPress page.

Creating a fiddle for what I think may be the problem has not replicated the issue.

For now, an extract of the page on which the problem is occurring will have to suffice, so before considering to downvote the question, please know that I intend to update the question with a fiddle once I know what root cause is that triggers the bug. Thank you in advance for allowing bending the rules slightly and temporarily for the greater good.

Note that I shall embark on the slow process of whittling away elements until only the problem remains, or resolves, or an answer is provided here, whichever comes first.

The Temporary Question

In general: mix-blend-mode affects parent elements in Chrome on Mac. It seems to affect elements which extend beyond the page, and / or which are fixed. There may be some relation to absolutely positioned elements. That all sounds a bit vague at this stage, but I am getting closer to finding an answer, and hence a better question.

I'll file a bug report on Google's forums, although it's worth pointing out that this does have a CSS workaround, so the question remains relevant. I managed to solve it on another site about 6 months ago. Unfortunately the site no longer exists, so I'm unable to find out how I fixed it.

Example

Here is a partially stripped-down page on which the WordPress admin bar was being affected. The black admin bar flashes on and off as you hover over elements.

I made that example by extracting the HTML and CSS, then deleting elements until the problem stopped occurring, then rewinding my deletion by one element to make the problem remain.

Extra

To make things more complicated, the issue is somewhat intermittent with a certain degree of "observer effect". Inspecting the element sometimes resolves the issue.

I'm pretty sure this is a Mac Chrome-specific bug, although it has not been resolved in over a year of updates. It does not appear in Firefox, Safari or on Windows versions of Chrome.

Thanks again. I am looking forward - not only to finding the answer, but also to improving the question.

simbasounds
  • 327
  • 5
  • 13
  • 1
    I'm running Chrome 57.0.2987.133 on macOS 10.12.4. No blending issues, but plenty of weirdness with the popups – they're partly transparent half the time, and hovering over the popup image causes the entire popup to flicker. Opening Chrome Inspector fixes everything and prevents the issue from happening. – Leland Apr 05 '17 at 17:50
  • By the by, that page is *extremely* slow to load. I didn't even want to debug it. It took 1.6 minutes each load. – Leland Apr 05 '17 at 17:50
  • 1
    Your description of the problem is correct. It does appear as an opacity issue with flickering. I thought it was blended. Whatever it is, it should not be. Re. the load time: one thing at a time please : ) – simbasounds Apr 05 '17 at 18:19
  • I just did a PingDom test. The page is only 1.2mb, but takes 15 secs to load from Dallas. However it loads in 4 secs on a clean cache from within South Africa which is the target audience. I shall include a faster example as part of my answer. – simbasounds Apr 05 '17 at 18:30
  • I've added a second, simpler example. – simbasounds Apr 05 '17 at 19:31
  • 1
    I can't seem to reproduce the behavior: no opacity weirdness and no flickering issue. Tested on Chrome 56 and 57, Windows 10 – Terry Apr 06 '17 at 07:27
  • I fired up my Windows 7 machine which is running Chrome 52, and the problem does not occur. Perhaps safe to say this is a Mac-only issue. Thank you. I'll update the question. – simbasounds Apr 06 '17 at 08:09
  • Apologies, I had to move on with the client site I had used as an example which affects the relevance of the comments. This was somewhat inevitable, given the tricky nature of the question. The example included now is simpler as a result, so there's a clearer path to finding the the root cause that triggers the bug. – simbasounds Apr 06 '17 at 19:47

1 Answers1

0

This doesn't strictly answer the question as to either what the problem is - seeing as it's clearly a bug - nor what the exact CSS cause and workaround is. I'm sure there's a better answer, and I will happily mark it as correct once it's found.

However, for now..

This works as a workaround:

Don't set mix-blend-mode on the pre-hover state of the element.

Instead set mix-blend-mode on the hover-state with default transition timing of zero. Then set the transition timing specifically on the background property only.

That way the flicker bug is instant, and therefore not visible.

simbasounds
  • 327
  • 5
  • 13