1287320 - Memrise.com - "help me remember this" doesn't render due to cross-origin mask URI

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[sotmex]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160716004012

Steps to reproduce:

It is pretty simple,
Start learning a new word and you click "help me remember this".


Actual results:

There is only white background with arrows to scroll through pictures which are not there.


Expected results:

It should show pictures that are mems which help you remember words you are learning.

Comment 1

[Liviu Cirdei]

User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID 	20160719030224

I reproduced the issue on latest Nightly with both e10s enabled and disabled. I also did a regression range and found this pushlog:

https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=373e67c2caaddfec3d3901e038804543c3da9afb&tochange=e33ed35dc9d98edf37f557fb24f9407522ab8a55

Suspect: Bug 1275450

Comment 2

[u459114]

The content origin is "http://www.memrise.com", and this page try to load a cross origin resource:
mask: url('https://d107cgb5lgj7br.cloudfront.net/garden/img/gardening/ui/mem-selection/mask.svg#mask');
So meet a security check error. That's what I learn from tracing code.

Before bug 1275450, we simply ignore un-resolvable mask, which does not follow css-masking spec.
We actually didn't apply any svg mask effect on that division(<div class="mem-selection-inner">)

After bug 1275450 land, the <div class="mem-selection-inner"> is not visible anymore.
css-masking spec said:
A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an mask element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black.

Comment 3

[u459114]

No, only background should be clip out instead of everything inside <div class="mem-selection-inner">. I will fix it.

Comment 4

[Jim Mathies [:jimm]]

Mike this sounds like evang related work.

Comment 5

[Mike Taylor [:miketaylr]]

> Mike this sounds like evang related work.

Yeah, possibly. 

CJ, so the fact that Chrome is happy to show the mask (and masked content) is a bug on their end? I feel like that's the more user-friendly option. Right now it just seems like Firefox is broken and Chrome isn't (to a user). :/

Also, I can't observe any CORS errors in devtools network panel or console, which would make it realllly hard to figure out why this was not working. That seems not good.

Comment 6

[Mike Taylor [:miketaylr]]

If we decide we do want to stick with this change (and spec compliance), I guess the fix here is to ask memrise to enable CORS headers on their cloudfront assets...  `Access-Control-Allow-Origin: http://www.memrise.com` (I don't actually know if https -> http is an issue here).

Comment 7

[u459114]

(In reply to Mike Taylor [:miketaylr] from comment #5)
> > Mike this sounds like evang related work.
> 
> Yeah, possibly. 
> 
> CJ, so the fact that Chrome is happy to show the mask (and masked content)
> is a bug on their end? I feel like that's the more user-friendly option.
> Right now it just seems like Firefox is broken and Chrome isn't (to a user).
> :/

(In reply to Mike Taylor [:miketaylr] from comment #5)
> > Mike this sounds like evang related work.
> 
> Yeah, possibly. 
> 
> CJ, so the fact that Chrome is happy to show the mask (and masked content)
> is a bug on their end? I feel like that's the more user-friendly option.
> Right now it just seems like Firefox is broken and Chrome isn't (to a user).
> :/
Chrome pick this rule:
-webkit-mask-image: -webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(10%, #000000), color-stop(90%, #000000), color-stop(100%, rgba(255, 255, 255, 0)));
FF pick this one:
mask: url('https://d107cgb5lgj7br.cloudfront.net/garden/img/gardening/ui/mem-selection/mask.svg#mask');
That's why chrome look ok, while FF is broken here.

(PS: Before we land bug 1251161, gecko support svg-mask, while webkit base browser support image/gradient mask)
> Also, I can't observe any CORS errors in devtools network panel or console,
> which would make it realllly hard to figure out why this was not working.
> That seems not good.
I can't either, I observed this problem by using debugger.

Comment 8

[u459114]

(In reply to Mike Taylor [:miketaylr] from comment #6)
> If we decide we do want to stick with this change (and spec compliance), I
> guess the fix here is to ask memrise to enable CORS headers on their
> cloudfront assets...  `Access-Control-Allow-Origin: http://www.memrise.com`
> (I don't actually know if https -> http is an issue here).

I hope we can stick with spec. Before a mask is ready to be used, we need that element no visible. Otherwise,
1. user will see whole background-image first, and then -
2. after mask is ready to apply, see clipped background-image.
It's better that user only see #2.

Comment 9

[u459114]

But if we decide not to stick with spec, I can do a workaround for css mask with single-svg-mask. Only in this condition(css mask with single-svg-mask), we go back to the original way(treat unresolvable mask as unmasked.) for compatibility.

Comment 10

[Mike Taylor [:miketaylr]]

> Chrome pick this rule:

Ah, OK. I missed that. 

Let's see how quickly we can try to get memrise to update their code here before considering hacks.

Adam, can you try to get in touch? See comment #2 and comment #6 for a description of the issue and how they can fix it.

Comment 11

[Mike Taylor [:miketaylr]]

Some of the people associated with https://github.com/memrise might be able to help here.

Comment 12

[Adam Stevenson [:adamopenweb]]

Thanks Mike. Let's try to reach Daniel Zohar on Twitter first. https://twitter.com/MozWebCompat/status/760552167325388800

Comment 13

[u459114]

They had fixed this issue. Close it.

Comment 14

[Brzola]

This issue is not fixed at all.

The Memrise site is unusable on Nightly because the "help me remember this" section is empty/blank.

I've also seen complaints from other users attempting to use Memrise saying they're having the same problem.

Memrise works perfectly on Chrome and Edge.

Comment 15

[Mike Taylor [:miketaylr]]

Brzola, would you be able to upload a screenshot and some more detailed steps to get to the bug you're seeing?

Comment 16

[Brzola]

Mike,

Identical as in the OP

Comment 17

[Brzola]

Identical, but using Nightly instead of Firefox/49.0 as in the original post

Comment 18

[Mike Taylor [:miketaylr]]

Attachment: Nightly - OSX screenshot.png

STR:

1) go to memrise.com, log in (I used my Google credentials)
2) add some languages and start learning words

e.g., http://www.memrise.com/course/1098043/spanish-spain-1/garden/learn/

I'm on OSX and I see the following (see attached image).

Brzola, can you give more details as to what platform you're using? I just updated to today's Nightly and it seems to work for me.

Comment 19

[Mike Taylor [:miketaylr]]

Attachment: Screenshot of bug

Hold up... missed crucial step 3) click on the "help me remember this" button.

Comment 20

[Mike Taylor [:miketaylr]]

Confirming as not fixed, possibly they regressed? Adam, can we get in touch again?

Comment 21

[u459114]

The reason is the same as comment 7. The reason is mask property is not validate(CORS error).
There are several ways to fix this issues
1. Simply remove mask property. FF accepts both mask and -webkit-mask from 53.
2. Chane mask property value form an invalid SVG mask URI to a gradient mask:
   gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(10%, #000000), color-stop(90%, #000000), color-stop(100%, rgba(255, 255, 255, 0)))
3. comment 7: ask memrise to enable CORS headers on their cloudfront assets

I personally think #2 is the best choice.

Comment 22

[Adam Stevenson [:adamopenweb]]

Completed the bug report form on their website. Linked back to this report, provided details and a screenshot.

Comment 23

[u459114]

Filed an issue to csswg:
https://github.com/w3c/csswg-drafts/issues/997

Comment 24

[Brzola]

Mike, C.J.Ku, and Adam, thank you very much for your help, looks like it will be resolved in due time.

Comment 25

[Mike Taylor [:miketaylr]]

Thanks for re-pinging the bug, Brzola!

Comment 26

[u459114]

After testing, I think they had fixed this issue.

Comment 27

[Mike Taylor [:miketaylr]]

Attachment: Screenshot - working

Yep, I see that as well CJ.

Comment 28

[Mike Taylor [:miketaylr]]

Let's go ahead and re-close.