image-treatment: right-click actions on image are being suppressed

[ianmcburnie]

From Prem Periyasamy:

users can’t download images by right clicking since right click target is the image treatment div and not the img tag, so the context menu for firefox and safari does not show the save image as or open image in a new window. Also when user tried to print the page, they see a blank and not see the image.

Solution via Stephen Scaff:

Use mix-blend-mode: darken on the img. And will-change:opacity on the wrapping parent.

UPDATE: use pointer-events: none to the ::after pseudo for image-treatment instead of switching to mix-blend-mode

[agniputran]

will-change: opacity is known to have performance issues.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Hence shouldn't be added to too many DOM element, if you can add a note on the skin docs, that'd be great. Basically a word of caution kind of thing

[agniputran]

In viewitem, we found users complaining about mix-blend-mode not working well in dark mode. so i feel like you can simply add the pointer-events: none to the ::after pseudo for image-treatment instead of switching to mix-blend-mode. Anyways you would have run into performance issues with over-using will-change: opacity

[ArtBlue]

@ianmcburnie , @agniputran , is mix-blend-mode referring to this:

&::after { 
    background: rgba(0, 0, 0, 0.05);
}

So, we're getting rid of this in lieu of pointer-events: none; ? These are not related so I'm trying to figure out why they are mentioned in relation to each other.