Bug 1841814 Comment 1 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Original comment by
on 
I can reproduce this on Firefox 116.0a1 Windows10.
Chrome uses css property '-webkit-mask-image' on that page. 
However, Firefox does not support it.
Revision 1 by
on 
I can reproduce this on Firefox 117.0a1 Windows10.
Chrome uses css property '-webkit-mask-image' on that page. 
However, Firefox does not support it.
Revision 2 by
on 
I can reproduce this on Firefox 117.0a1 Windows10.

The relevant css is as follows```
.coupon___Asm0O.hasApplyButton___Y9VEl {
    --cutout-width: 8px;
    --cutout-height: 24px;
    --mask-offset: 48px;
    --mask-position: calc(var(--height) - var(--mask-offset));
    --cutout-y: calc(var(--mask-position) - var(--cutout-height)/2);
    clip: auto;
    -webkit-mask-composite: xor,xor,source-over;
    mask-composite: xor,xor,source-over;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMXYxSDAiLz48L3N2Zz4=),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEgNi4zIj48cGF0aCBkPSJNMCA2LjNjMC0uNS40LTEgLjktMS4yLjQtLjIuOC0uNiAxLTFhMi4xIDIuMSAwIDAgMC0uNC0yLjRjLS4zLS40LS44LS41LTEtLjhDLjEuNyAwIC4zIDAgMHY2LjN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEgNi4zIj48cGF0aCBkPSJNMi4xIDYuM2MwLS41LS40LTEtLjktMS4yLS40LS4yLS44LS42LTEtMWEyLjEgMi4xIDAgMCAxIC40LTIuNGMuMy0uNC44LS41IDEtLjguMy0uMi41LS42LjUtLjl2Ni4zeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMXYxSDAiLz48L3N2Zz4=),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEgNi4zIj48cGF0aCBkPSJNMCA2LjNjMC0uNS40LTEgLjktMS4yLjQtLjIuOC0uNiAxLTFhMi4xIDIuMSAwIDAgMC0uNC0yLjRjLS4zLS40LS44LS41LTEtLjhDLjEuNyAwIC4zIDAgMHY2LjN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyLjEgNi4zIj48cGF0aCBkPSJNMi4xIDYuM2MwLS41LS40LTEtLjktMS4yLS40LS4yLS44LS42LTEtMWEyLjEgMi4xIDAgMCAxIC40LTIuNGMuMy0uNC44LS41IDEtLjguMy0uMi41LS42LjUtLjl2Ni4zeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
    -webkit-mask-position: 0 0,0 var(--cutout-y),100% var(--cutout-y);
    mask-position: 0 0,0 var(--cutout-y),100% var(--cutout-y);
    -webkit-mask-repeat: repeat,no-repeat,no-repeat;
    mask-repeat: repeat,no-repeat,no-repeat;
    -webkit-mask-size: 1px 1px,var(--cutout-width) var(--cutout-height),var(--cutout-width) var(--cutout-height);
    mask-size: 1px 1px,var(--cutout-width) var(--cutout-height),var(--cutout-width) var(--cutout-height);
    will-change: mask-image;
}
.coupon___Asm0O {
    --height: 214px;
    clip: auto;
    align-items: center;
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    height: var(--height);
    max-width: 300px;
    min-width: 150px;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: opacity .3s ease-in-out;
    will-change: mask-image;
}
```

Back to Bug 1841814 Comment 1