1300384 - http://www.evil-bikes.com/ does not render correctly.

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P2)

Description

[Eric Rescorla (:ekr)]

Attachment: Chrome

See attached screenshots

Comment 1

[Eric Rescorla (:ekr)]

Attachment: Firefox Nightly

See clipped banner that reads "The Day of Wreckoning"--at least on Chrome

Comment 2

[Jeremy Chen ([e-mail])]

FWIW, this renders correctly on Firefox Developer Edition.

Comment 3

[Mats Palmgren (inactive)]

The <a href="/products/wreckoning">The Day of Wreckoning</a>
is using:
-webkit-mask-image: url(https://cdn.shopify.com/s/files/1/0903/4494/files/distressed-txt.png?11373174264379735596);
Disabling that declaration makes it render as expected.
Fwiw, the clip error is also affected by this (in the same rule):
text-shadow: 0px 0px 30px rgba(30,28,28,0.6);

Comment 4

[u459114]

I will look into it.

Comment 5

[Mike Taylor [:miketaylr]]

Thanks CJ!

Comment 6

[u459114]

Attachment: text be truncate by mask

Comment 7

[u459114]

Still working on this. We do not handle mask on text element correctly.

Comment 8

[u459114]

There are three errors which cause this bug.
I can fix the first two in this bug, but mask-repeat spec change also cause wrong rendering result.(see bug 1301106)

Comment 9

[u459114]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=59ba4834061b

Comment 10

[u459114]

On nightly, we already render text with mask correctly, except some portion, at right hand and left hand boundary, is clipped out by border-box. And, I think that's a correct behavior.

In bug 1303981 comment 4, jfkthame had explained that glyphs may extend beyond the border box. According to positioned mask spec, those portion of a glyph should by clipped out by the box specific in mask-clip(default value is border-box). In bug 1311270, we are going to support mask-clip:no-clip, which may prevent glyph been clipped. And we also need to persuade evil-bikes use no-clip after bug 1311270 been fixed.

Comment 11

[u459114]

Attachment: clipped glyph

Comment 12

[Astley Chen (inactive)]

Compared to the result on FF51, it looks better now. However, I can still find a glyph cut in the page.
CJ, what else we can do here? As you mentioned in comment 10, time to reach out website for a compatibility fix?

Comment 13

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 14

[Thomas Wisniewski [:twisniewski]]

This site no longer has this design, and all the sub-bugs I see in the comments are long fixed, so let's close this as WORKSFORME for now.