1841814 - The coupon is not rendered correctly on joom.com

Status: RESOLVED WORKSFORME

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

Description

[Calin Tanase]

Attachment: Joom.png

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Firefox version: Nightly 117.0a1-20230704214905

Preconditions: Coupon available in the account

Steps to reproduce:

1. Go to https://www.joom.com/en
2. Log into your account.
3. Tap on the "You have a coupon!" banner.
4. Observe the coupon's shape.

Expected Behaviour:
The coupon is rendered correctly.

Actual Behaviour:
The coupon is not rendered correctly.

Notes:

1. Screenshot provided
2. Reproducible on Firefox Release as well
3. Not reproducible on Chrome
4. Reproducible on Windows 10 as well
5. Coupons are normally offered for new users or from spinning the wheel (check notifications or the burger menu to see if there is any "Spin the wheel" button available)
6. The coupon can be accessed also from the cart if there is a product added, by tapping on the "Coupon available >" button

Comment 1

[Alice0775 White]

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;
}

Comment 2

[Raul Bucata]

Attachment: Screenshot_24.png

Comment 3

[Raul Bucata]

Verified this issue and could not reproduce it on Firefox versions 122 and 124.

Tested with:

Browser / Version: Firefox Release 122.0 (2015998391-🦎122.0-20240118164516🦎)/ Firefox Nightly 124.0a1 (2016000167-🦎124.0a1-20240127211938🦎)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)
Operating System: Oppo Find X5 (Android 13) - 1080 x 2400 pixels, 20:9 ratio (~402 ppi density)