1266547 - Can not move cursor by touch in Facebook's comment response field

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

This CSS prevents moving the cursor around by touch in the Facebook textareas to reply to other comments:

.touch input, .touch textarea {
    -moz-user-select: auto;
}

https://static.xx.fbcdn.net/rsrc.php/v2/yt/r/fOGZ913wzZg.css

I'm not sure if we're doing this correctly or not.. If it is correct, please accept my apologies and move the bug to tech evangelism.

Comment 1

[Mark Capella [:capella]]

driveby: not an expert, but I'd noticed that pattern in earlier discussions

As per [0] (and I've not tested) there's no |-moz-user-select: auto;| for re-enabling selection ...

the apparant solution is |-moz-user-select: text|

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Comment 2

[Hallvord R. M. Steen [:hallvors]]

Hm.. Now I'm confused. Disabling that style from devtools solved the problem but making a minimal test case doesn't seem to support my belief that this styling was the cause..

Comment 3

[Hallvord R. M. Steen [:hallvors]]

That styling *and* a -moz-user-select:none set on an ancestor causes the problem. Somehow the "auto" value makes the TEXTAREA default to inherit the "none" where it would otherwise default to "text".

Facebook should switch to this:

.touch input, .touch textarea {
    -moz-user-select: text;
}

Comment 4

[Hallvord R. M. Steen [:hallvors]]

Bringing it to Facebook's attention. Should be an easy fix :)

Comment 5

[Mark Capella [:capella]]

Right, -moz-user-select:none causes all children down the tree to loses selectability. The -moz-user-select:auto is ignored.

Comment 6

[Hallvord R. M. Steen [:hallvors]]

But that's not what I was seeing (would have been easier to figure out). Here if I remove the -moz-user-select:auto but leave the -moz-user-select:none, I *can* move the cursor around in content inside TEXTAREA. Also, when auto is disabled getComputedStyle(textarea).MozUserSelect returns 'text', not 'none', and the devtools computed style view show nothing for -moz-user-select.

It's like -moz-user-select:auto makes some aspect of the -moz-user-select:none state apply to the TEXTAREA where it otherwise wouldn't..? Strange, but we have a simple fix for Facebook so I don't think studying this further is useful.

Comment 9

[bull500]

Any progress on this bug? Been months and a major usability issue.     
Its really frustrating to have think in advance and then type it down.

Comment 10

[Mike Taylor [:miketaylr]]

I guess that means it's not fixed. Let's move back to contactready and ping Facebook about it. Comment #4 suggests Hallvord contacted them with the fix (I'm guessing on our private mailing list) from Comment #3, but they could probably use a re-ping.

Karl, can you get in touch with FB again?

Comment 11

[Karl Dubost💡 :karlcow]

Sure.

recontacted today on the partner list.

Comment 14

[Mike Taylor [:miketaylr]]

bull500, does this still reproduce? There was a note that a fix was going out in December -- thanks!

Comment 15

[bull500]

(In reply to Mike Taylor [:miketaylr] from comment #14)
> bull500, does this still reproduce? There was a note that a fix was going
> out in December -- thanks!

Mike im sorry, i've quit facebook.  
IIRC it did start working some point in late December or January but i cannot confirm it.

Comment 16

[Mike Taylor [:miketaylr]]

No worries, thanks bull500! Adam, would you be able to test?

Comment 17

[Adam Stevenson [:adamopenweb]]

Looks like it's working from my test. I'll document my steps to ensure I'm not missing something here:

1) Go to facebook.com in Firefox Android
2) Find a comment on a post
3) Tap reply
4) Type a sentence
5) Move cursor around 

The cursor moves around the textarea as expected.

Comment 18

[bull500]

(In reply to Adam Stevenson [:adamopenweb] from comment #17)
> Looks like it's working from my test. I'll document my steps to ensure I'm
> not missing something here:
> 
> 1) Go to facebook.com in Firefox Android
> 2) Find a comment on a post
> 3) Tap reply
> 4) Type a sentence
> 5) Move cursor around 
> 
> The cursor moves around the textarea as expected.

Could you also try pasting a multi line paragraph and checking if the cursor moves as well?  
Do try on some brand pages - its where i noticed to happen

Comment 19

[Adam Stevenson [:adamopenweb]]

Testing on the Netflix page. I pasted a two paragraph long "comment" into the reply box. The cursor moves around properly. It's not the greatest experience, moving a cursor around this tiny text area, but it works.

Comment 20

[Mike Taylor [:miketaylr]]

Sounds like we can close this as fixed -- thanks!