1524261 - Whatsapp emoji list isn't correctly clipped

Status: RESOLVED FIXED

Description

[TMart]

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

Steps to reproduce:

Updated Nightly to 67.0a1 (2019-01-31) (64-bit).
Opened emoji list in Whatsapp Web chat window.

Actual results:

When scrolling in the emoji list the emojis go "out of bounds" of their designated window area and overlay the chat.

https://abload.de/img/unbenannt28j0c.png

Comment 1

[Emilio Cobos Álvarez (:emilio)]

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=9452ba2d9657b30f5c82b201b3f3941a1a9e8f5f&tochange=25a343e42273d189cf01e72cf447232016faace8

Comment 2

[Jan Andre Ikenmeyer [:darkspirit]]

Attachment: 2019-01-31 15-13-08.mp4

Comment 3

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Attachment: WIP

Looks like the emojis are inside a transform (possibly multiple nested transforms) and the clip chain isn't getting applied properly on the stacking contexts for the transforms. Attached WIP fixes it, but I dunno if it breaks other stuff.

Comment 4

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

https://treeherder.mozilla.org/#/jobs?repo=try&group_state=expanded&revision=f0825a49faf9032da88e77c4c1d33e33cce38c4c

Comment 5

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Bunch of orange, but they all look like fuzzable differences. On Linux at least. So that's good news.

Comment 6

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Attachment: Reduced testcase

Comment 7

[Jan Andre Ikenmeyer [:darkspirit]]

(Scrolling the playlist: https://www.youtube.com/watch?v=8JnfIa84TnU&list=RD8JnfIa84TnU)

Comment 8

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

On Mac and Windows the differences are also fuzzable but there's a lot more due to text antialiasing differences. Fixing this up is going to be quite tedious. For now I'll back out the regressing changes.

Comment 10

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Attachment: Bug 1524261 - Add a reftest to prevent regression. r?jrmuizel

WhatsApp Web has emojis in divs with border-radius, inside a transform,
inside a scrollframe. The patch in bug 1523776 broke the clipping in
that scrolling the scrollframe would make the emoji visible outside the
scrollframe. This reftest replicates that scenario.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/b67d5ecb31b3
Add a reftest to prevent regression. r=jrmuizel

Comment 13

[Cosmin Sabou [:CosminS]]

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&searchStr=linux%2Cdebug%2Creftests%2Ctest-linux32%2Fdebug-reftest-1%2Cr%28r1%29&fromchange=0e18cf58da1ae0041365d76ada202bbe370d8faf&tochange=f0f368542bf7c22c9b05d625a6afb3a197a40235&group_state=expanded&selectedJob=225322703

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=225322703&repo=mozilla-inbound&lineNumber=10162

Backout link: https://hg.mozilla.org/integration/mozilla-inbound/rev/f0f368542bf7c22c9b05d625a6afb3a197a40235

Comment 14

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

This one is only failing on linux32 debug where we're still running non-e10s tests (i.e. this needs a skip-if(!asyncPan))

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/441cc27a02fa
Add a reftest to prevent regression. r=jrmuizel

Comment 16

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/441cc27a02fa

Comment 17

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Would like to uplift this, a=test-only

Comment 18

[Liz Henry (:lizzard) (use needinfo)]

Kats are you still intending uplift here?

Comment 19

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

Yup, I'll do that now.

Comment 20

[Kartikaya Gupta (email:[e-mail]) (away until Feb-2020)]

https://hg.mozilla.org/releases/mozilla-beta/rev/d1f0fc61d276