While trying to add color to background SVG images I noticed some weird behavior in the latest version of Google Chrome (63 at the time of writing) on Mac. While I haven’t fully figured what the issue is yet, for the time being I’ve got it boiled down to this: Whenever an element acts as a container that is constrained in size and you want the overflow to scroll, you better not have anything inside that uses
mix-blend-mode, otherwise Chrome
on Mac will choke , while Chrome on Windows is fine. This only seems to happen when the container in question creates a stacking context, say by adding something like
transform or when applying fixed or sticky positioning.
Somewhat simplified it may look like this …
… but if you are using Chrome
on Mac, you can check out the demo on CodePen. As mentioned, it does work in Chrome on Windows. Other browsers I’ve tested are Firefox and Safari, and they seem to be fine, so I guess we don’t need to argue on how to interpret the specification.