1990445 - x.com - unable to select/copy direct messages (via long-pressing on Android or clicking-and-dragging on Desktop)

Status: VERIFIED FIXED

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

Description

[Calin Tanase]

Environment:
Operating system: Android 12
Firefox version: Firefox Mobile [phone]

Steps to reproduce:

1. Go to https://x.com/messages/
2. Open an existing conversation.
3. Long press on the chat messages.

Expected Behavior:
The context menu appears.

Actual Behavior:
The context menu does not appear, unable to copy the messages.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/178888

Comment 1

[Calin Tanase]

Attachment: xcom Nightly vs Chrome.mp4

Comment 2

[Titouan Thibaud [:titouan]]

Attachment: repro.html

I investigated this issue using the web inspector (about:debugging) connected to my Android device, using Fx146 on Android 16.

I attached a minimal repro of the issue.
Selecting text on the card from the attached html works fine on Chrome, and is blocked on Firefox Android.

The file also contains a commented css rule. When uncommenting it, long pressing to select the text works both on Chrome and Fenix:

.tweet { user-select: text; -moz-user-select: text; }

More specifically to the Twitter page:

<button
   aria-expanded="false"
   role="button"
   class="css-175oi2r r-1habvwh r-1loqt21 r-1ny4l3l"
   data-testid="messageEntry"
   type="button"
   >
   <div class="css-175oi2r r-1euycsn r-17s6mgv r-13qz1uu">
      <div
         class="css-175oi2r r-18u37iz r-1h0z5md r-1noe1sz r-orgf3d r-1kihuf0 r-633pao"
         >
         <div class="css-175oi2r">
<button
   aria-expanded="false"
   aria-haspopup="menu"
   aria-label="Ajouter une réaction"
   role="button"
   class="css-175oi2r r-sdzlij r-1phboty r-rs99b7 r-lrvibr r-1ii58gl r-25kp3t r-1loqt21 r-o7ynqc r-6416eg r-1ny4l3l"
   style="
   background-color: rgba(0, 0, 0, 0);
   border-color: rgba(0, 0, 0, 0);
   "
   type="button"
   >
<div
   dir="ltr"
   class="css-146c3p1 r-bcqeeo r-qvutc0 r-37j5jr r-q4m81j r-1b43r93 r-hjklzo r-b88u0q r-1awozwy r-6koalj r-18u37iz r-16y2uox r-1777fci"
   style="color: rgb(29, 155, 240)"
   >
<svg
   viewBox="0 0 24 24"
   aria-hidden="true"
   class="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-1yevf0r r-meisx5 r-qazpri"
   >
<g>
<path
   d="M17 12v3h-2.998v2h3v3h2v-3h3v-2h-3.001v-3H17zm-5 6.839c-3.871-2.34-6.053-4.639-7.127-6.609-1.112-2.04-1.031-3.7-.479-4.82.561-1.13 1.667-1.84 2.91-1.91 1.222-.06 2.68.51 3.892 2.16l.806 1.09.805-1.09c1.211-1.65 2.668-2.22 3.89-2.16 1.242.07 2.347.78 2.908 1.91.334.677.49 1.554.321 2.59h2.011c.153-1.283-.039-2.469-.539-3.48-.887-1.79-2.647-2.91-4.601-3.01-1.65-.09-3.367.56-4.796 2.01-1.43-1.45-3.147-2.1-4.798-2.01-1.954.1-3.714 1.22-4.601 3.01-.896 1.81-.846 4.17.514 6.67 1.353 2.48 4.003 5.12 8.382 7.67l.502.299v-2.32z"
   ></path>
</g></svg
   ><span
   class="css-1jxf684 r-dnmrzs r-1udh08x r-1udbk01 r-3s2u2q r-bcqeeo r-1ttztb7 r-qvutc0 r-poiln3 r-1b43r93 r-hjklzo"
   ></span>
</div>
</button>
</div>
<button
   aria-expanded="false"
   aria-haspopup="menu"
   aria-label="Plus d'actions"
   role="button"
   class="css-175oi2r r-sdzlij r-1phboty r-rs99b7 r-lrvibr r-1ii58gl r-25kp3t r-1loqt21 r-o7ynqc r-6416eg r-1ny4l3l"
   style="
   background-color: rgba(0, 0, 0, 0);
   border-color: rgba(0, 0, 0, 0);
   "
   type="button"
   >
<div
   dir="ltr"
   class="css-146c3p1 r-bcqeeo r-qvutc0 r-37j5jr r-q4m81j r-1b43r93 r-hjklzo r-b88u0q r-1awozwy r-6koalj r-18u37iz r-16y2uox r-1777fci"
   style="color: rgb(29, 155, 240)"
   >
<svg
   viewBox="0 0 24 24"
   aria-hidden="true"
   class="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-1yevf0r r-meisx5 r-qazpri"
   >
<g>
<path
   d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
   ></path>
</g></svg
   ><span
   class="css-1jxf684 r-dnmrzs r-1udh08x r-1udbk01 r-3s2u2q r-bcqeeo r-1ttztb7 r-qvutc0 r-poiln3 r-1b43r93 r-hjklzo"
   ></span>
</div>
</button>
</div>
<div class="css-175oi2r r-1habvwh r-1wbh5a2">
<div
   role="presentation"
   class="css-175oi2r r-1fuqb1j r-deolkf r-dnmrzs r-kritb0 r-ubg91z r-k200y r-gu4em3 r-1roi411 r-hv4q04 r-o7ynqc r-6416eg r-1ny4l3l"
   >
<div
   dir="auto"
   class="css-146c3p1 r-bcqeeo r-qvutc0 r-37j5jr r-1b43r93 r-hjklzo r-16dba41 r-bnwqim r-1udh08x r-1rozpwm r-fdjqy7"
   style="color: rgb(255, 255, 255)"
   data-testid="tweetText"
   >
<span
   class="css-1jxf684 r-bcqeeo r-1ttztb7 r-qvutc0 r-poiln3"
   >MESSAGE</span
   >
</div>
</div>
</div>
</div>
</button>

When inspecting this button, in the Computed pane with Browser styles enabled, I get this:

user-select: none

Replacing the <button> with a <div> containing the same content immediately allows selection.

Does this help? I can provide more information if needed.

Comment 3

[Jeff Muizelaar [:jrmuizel]]

Daniel, do you know who's the best person to look at this?

Comment 4

[Daniel Holbert [:dholbert]]

I spun off bug 1998331 as a platform-bug here. Looks like this is a longstanding difference related to button default styles. We should probably aim for alignment there, but it's a bit subtle and I'm not sure we'll have cycles to fix it properly/thoroughly right away.

For now I'd suggest that we either do outreach or ship a sitepatch to add user-select: text on the elements in question here --> adding needs-sitepatch and webcompat:needs-contact.

Comment 5

[Daniel Holbert [:dholbert]]

A few additional notes:
(1) I see this same bug on desktop as well. In Chrome, I can click-and-drag to select text in my Twitter/X DMs, but I can't in Firefox.

(2) Regarding user-select: text -- Chrome does actually get user-select: text on these buttons via inheritance from an ancestor-div that has style set on it, via this rule:

.r-1xnzce8{-moz-user-select:text;-webkit-user-select:text;user-select:text;}

That inherits down to these buttons -- but in Firefox, that doesn't help because we override it with the UA stylesheet rule that I linked in the platform bug, which explicitly sets user-select: none for buttons.

One possible fix here (either on Twitter/X end or on our own end as an intervention) would be something like the following, targeting https://x.com/messages/*

.r-1xnzce8 button:not(.r-lrvibr) {
  user-select:text;
}

The relevance of the selector-pieces there:

• .r-1xnzce8 is the class that grants user-select: text to some ancestor div (which then inherits to button descendants automatically in Chrome, which the site seems to sort-of depend on for this text selection use-case to work)
• .r-lrvibr is a class that the site sets on some buttons (e.g. buttons next to message with 3-dot and heart icons, which appear on hover), which explicitly sets user-select: none. I want to be sure our new rule here doesn't supersede that one; so I'm just excluding buttons with that class.

Comment 6

[Thomas Wisniewski [:twisniewski]]

Dan, can you check if this is still an issue, and the CSS you suggested still exists? If so I can write an intervention; I just worry that the CSS will change frequently, so it might be worth reaching out to them as well.

Comment 7

[Jeff Muizelaar [:jrmuizel]]

Calin, can you retest on Nightly?

Comment 8

[Calin Tanase]

Works now on the latest Nightly on both android and desktop.

Comment 9

[Daniel Holbert [:dholbert]]

Calin, can you check whether you see the weird jumpy/flickery behavior that I describe in bug 2062388?

Comment 10

[Calin Tanase]

No, I couldn't reproduce the issue as presented on the screen recordings. Works on both x.com and youtube.com.

Comment 11

[Daniel Holbert [:dholbert]]

Thanks. I now can't repro bug 2062388 either, so I'm not sure what was going on for me there. But in any case, I can verify that I get good results in current Nightly on Android here, so I think we can consider this solidly fixed.