Can't reproduce, but maybe we can get a bisect for this. (Animation seems to work by setting opacity)

Unable to reproduce the issue on Windows 7,Linux 14.04 & mac 10.11.6 with chrome reported version- 54.0.2840.100 and latest canary-  the steps mentioned in Comment#0.

Not seen  any faded background in submenu of the website.

Please find the attached screencast for reference & let us know if we miss anything to reproduce the issue.

Thank you.

Deleted: 665458.webm 7.8 MB

	665458.webm 7.8 MB View Download

I think I can reproduce this on Chrome 55.0.2883.42; Chrome OS device (Pixel).

and I think I do see it in your video in comment #2.

If you actually click "ANWALTE" you will see the sub menu gets truncated in painting.

Appears to be fixed correctly if I set z-index: 1 on the absolute positioned menu. 

Seems like an invalidation region bug to me.
 

It is reproducible and visible in the video in comment #2, when the menu is clicked on. I'm on Chrome 55.0.2883.35 beta linux.

Activating the menu header link causes opacity on <main id="page" ...> to animate from 0 - 1. For whatever reason, this pops the page content in front of the menu, where the page body's opacity increase covers up the menu, before it pops back behind again when the animation finishes.

Setting z-index:1 pops the menu out into its own painting pass so it draws right.

Adding will-change: opacity to the main page causes the bug to be permanent.

This has likely always been broken.

Maybe a dupe of https://bugs.chromium.org/p/chromium/issues/detail?id=501596

Ha! Thanks for the workaround #3 :)

TL; DR:

1. z-index does not apply to non-positioned elements
2. Positioned and stacking-context-inducing elements paint after regular elements, even if the latter occur
later in DOM order

When opacity:1 is set on the image, there is only one stacking context on this page. Furthermore, the
dropdown menu contents are positioned, because it is inside of a <ul> object which is position: absolute.

Therefore due to rule 2 above, the menu paints after the image.

If opacity is set to something less than 1 on the image, then now the image also has rule 2, and since it 
is also later in DOM order, it paints later.

Also, the the stylesheet linke that tries to account for this:

nav li li 		{ float:none; max-width:none; width:20em; z-index:2; }


does not apply, because of rule #1 from comment 6 (you could fix this by adding
position:relative).