1949466 - lapalabradeldia.com - Letters disappear randomly when trying to guess the words

Status: ASSIGNED

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

Description

[Calin Tanase]

Attachment: lapalabradeldia FF vs Chrome.mp4

Environment:
Operating system: Windows 10
Firefox version: Firefox 135.0 (release)/137

Preconditions:

• Clean profile

Steps to reproduce:

1. Navigate to: https://lapalabradeldia.com/
2. Dismiss the cookie banner.
3. Click on "¡Jugar!" button.
4. Click on random letters. (if the issue does not reproduce first time, erase the letters and try again)

Expected Behavior:
The letters are fully visible.

Some letters disappear.

Notes:

• Reproducible on the latest Firefox Release and Nightly
• Reproducible regardless of the ETP setting
• Works as expected using Chrome

---

Created from webcompat-user-report:1d9a6ed4-0ee6-4ddf-a6f1-8fac664001dc

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 2

[Alice0775 White]

It seems to work as expected if set layers.offmainthreadcomposition.async-animations to false.

Comment 3

[Nicolas Silva [:nical]]

Interestingly, the DOM elements exist from the point of view of the developer tools but there doesn't seem to be even a hit testing item present in on the WR side. It looks like the problem might be happening somewhere between layout and the DL building code, I don't know how animations slot in exactly. Hiro, is that something that you could look into?

Comment 4

[Alice0775 White]

The following workaround seems to work.

.react-card-front div{
  opacity:1 !important;
}

Comment 5

[Hiroyuki Ikezoe (:hiro)]

As Alice found out, this looks a bug on our compositor running animations. There are transform/opacity animation running, and the parent element of the animating element has backface-visibility: hidden and transform-style: preserve-3d, these properties are probably related to this bug. As far as I've tested, removing these properties solves this issue, but I am not 100% sure, the issue is originally a bit hard to reproduce.

CCing Boris.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Dennis, would you mind changing the "diagnosis-team" from graphics to something different? I am not sure what kind of team names exist though, I am pretty sure graphics is not the proper one here. Thanks!

(I am clearing NI for now. This bug will be diagnosed by the team. Though I am technically a member of the team)

Comment 7

[Sky Schubert [:skyschub]]

Given what you discovered, this seems more of a layout issue, so I'll assign them.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1 (reproduces intermittently)

Comment 9

[Daniel Holbert [:dholbert]]

I spun off bug 1951707 as the underlying platform bug here. [EDIT: I later noticed that we in fact have older bug 1698988 already filed on this platform issue.]

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #5)

As Alice found out, this looks a bug on our compositor running animations. There are transform/opacity animation running, and the parent element of the animating element has backface-visibility: hidden and transform-style: preserve-3d, these properties are probably related to this bug. As far as I've tested, removing these properties solves this issue, but I am not 100% sure, the issue is originally a bit hard to reproduce.

Indeed, the platform bugs (bug 1698988 and my dupe bug 1951707) require transform-style: preserve-3d to trigger the issue.

This might be a sitepatch workaround we could deploy here in the meantime:

.react-card-front { transform-style: initial !important; }

At first glance, that avoids the issue for me -- I'm able to play through a whole game (using letters from https://www.spanishdict.com/guide/five-letter-spanish-words ) and no letters disappear, and the animations all look visually correct to me. (It's possible this will cause some cosmetic defects, but they're likely better than the letters intermittently disappearing entirely which is the issue we hit right now.)

Tom, would you mind trying that out as a sitepatch?

Comment 11

[Thomas Wisniewski [:twisniewski][on PTO until July 6]]

Hmm. While working on a webdriver test-case for an intervention here, I found that I can only make the card elements "disappear" if I trigger mousemove events while the cards' fading-in animation is happening. Then they vanish, and when I finally move my mouse again, they reappear.

The problem doesn't happen at all if I use my physical keyboard to input letters instead of the mouse, and so I also had to have my webdriver test simulate some mouse-move events during the animations as well. So maybe this is a bug related to mousemoves during CSS animations? I think the page is also listening for mousemove events on the buttons, so perhaps that's related..

Note that I also can't seem to reproduce the problem on my phone.

Comment 12

[Thomas Wisniewski [:twisniewski][on PTO until July 6]]

Attachment: Bug 1949466 - add a desktop-only CSS webcompat intervention for lapalabradeldia.com to keep cards from vanishing; r?denschub

Comment 13

[Randell Jesup [:jesup] (needinfo me)]

Agreed, the mouse-move is definitely required (and would be pretty normal for users to do).

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/65291859ec18
add a desktop-only CSS webcompat intervention for lapalabradeldia.com to keep cards from vanishing; r=denschub,webcompat-reviewers

Comment 15

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/65291859ec18