1568451 - MDN's CSS mask-image demo doesn't work (shows nothing) when you click the jsfiddle/codepen buttons

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: General, defect)

Description

[Elmo Allén]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

The CSS attribute mask-image doesn't seem to work any more. The simplest example is the MDN example: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

When opening the example in either CodePen or JSFiddle, the star cannot be seen, or anything at all. (If I remove the mask-image attribute, the light green rectangle is again seen. With the mask-image set, nothing.)

Tested in 68.0.1 and 69.0b7. The example code works in Chrome; it should be ok (although Chrome uses the -webkit-mask-image).

This may affect some icon library implementations, where users can customize the library contents with uploadable SVG files of any color (which leaves out the use of built icon font files). For example, this is possible in HubSpot.

Comment 1

[Robert Longson [:longsonr]]

The file https://mdn.mozillademos.org/files/12676/star.svg needs to have preserveAspectRatio="none" added to its root <svg> element. Our rendering was buggy before, now it isn't and the example assumed the buggy rendering. Our rendering is now compatible with Chrome's -webkit-mask-image implementation.

Comment 2

[Robert Longson [:longsonr]]

Daniel,

kind of assuming this is the same issue as bug 1567987, if so we need to fix MDN but I don't know how to change https://mdn.mozillademos.org/files/12676/star.svg assuming that's what's required.

Comment 3

[Elmo Allén]

The bug https://bugzilla.mozilla.org/show_bug.cgi?id=1567987 doesn't seem to be related. It's about incorrect rendering, this is about masks not working at all.

However, this seems to be a CORS problem at the MDN. Now I looked at the console in the CodePen and there's a CORS block there for the image mask.

I thought the masks don't work at all, because I couldn't get a simple example working when trying it locally (with just opening a file with file:///). That example, too, started working, when I moved it to an actual web server. Also the problem with HubSpot (which was the reason I started to find out why the masks aren't working) seems to be just CORS.

There's still the problem of why the mask-image: url() doesn't work when opening with file:///, but that's quite a lot more minor problem. They don't seem to work, regardless of whether I refer to them with absolute links (e.g. file:///C:/.../test.svg) or relative (just test.svg). Not much of a problem, but at least baffled me when trying to test things out and lead me to a wrong track.

Comment 4

[Robert Longson [:longsonr]]

file:/// not working is bug 1565509

Comment 5

[Daniel Holbert [:dholbert]]

So I think this is INVALID as a Firefox bug:

• The behavior described in comment 0 -- i.e. the mask-image being unavailable to jsfiddle/codepen -- is due to CORS default-blocking behavior (which shows up in web console per per comment 3).
• Safari 12.1 and Edge 18 agree with Firefox on this. (The mask works in the embedded mdn.mozillademos.org-hosted example, and it fails in the jsfiddle-hosted demo.)
• Chrome disagrees but this is a known Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=786507

So the issue here is that MDN is offering jsfiddle/codepen links here that do not work. We should address this somehow. We can either:
(1) Adjust mdn.mozillademos.org (at least for this particular star.svg URL) to provide a permissive CORS header in the HTTP response
..or:
(2) Remove the codepen/jsfiddle links on this mask-image page entirely -- just show the embedded example without the "tinker" buttons (since they inadvertently trigger this cross-origin issue, due to the demo-content referring to a mdn.mozillademos.org-hosted resource).

cmills, do you know if we can act on either of these ^^ options? (Also, please categorize this bug appropriately if you know how -- I'm putting it in the developer.mozilla.org::General category for now, but that's probably wrong.)

Comment 6

[Chris Mills [:cmills]]

I've updated the live sample so that the buttons are no longer shown. I think this is fixed now, right?

Let me know if there is. anything else to do here.

Comment 7

[Daniel Holbert [:dholbert]]

Yeah, that seems like a reasonable resolution. Thanks!