CSS user-select:none and -ms-user-select:none do NOT adhere to the specs

Confirmed Issue #13099362 • Assigned to Grisha L.

Details

Author
Stephen C.
Created
Aug 4, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Standard affected
User Interface for CSS3

Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

According to the specs, and the way all other browsers have implemented it, the user-select:none and -ms-user-select:none CSS properties should NOT allow selection of the contents of the elements that this is applied to:
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select

In IE, it DOES correctly block user selection within the element, however it DOES NOT block selection if the user starts above/before or below/after and drags through the element.

Attachments

Comments and activity

  • Added a simplified repro test case.

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi Stephen,

    Does this happen in IE as well as recent versions of Edge?  Can you tell me the most recent version of Windows 10 you are seeing this issue?

    Thank you for the help,

    Steve

  • Sorry I’m unable to test in the most recent version of Edge (IT lockdown), this version:
    “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586” currently exhibits the bug. If someone with the latest build can test and confirm it still exists it would be appreciated.

  • I tested this on Windows 10 1607 (14393.952), 1703 (15063.540), and the latest insider fast release 16267 and they all behave in the same way as Chrome.  How are you verifying that the text is selected?  By copying and pasting?

    I have attached a version with a CSS pseudo-class selector and console logging.  I do not see the text being highlighted in any of the testing, however, in all tests and in Chrome, I was able to copy and paste the content.

    Is the issue that you can copy and paste this text?

  • I’ve added screenshots of your modified test case, showing the text highlight in cyan.

    As you can see in Firefox and Chrome, if you start selecting above the line in the red dashed box (the one you can’t highlight), neither browser selects the text (follows the specs)

    however in the Microsoft Edge screenshot, you can see that the text that should not be selectable is indeed selected (fails)

    I have no idea about copy/paste issues if there are any. This is all about elements that are rendered to the page that the user shouldn’t be able to select the text on. e.g. if you have a web app, text on buttons should not be selectable, ditto for tabs, labels and any other non-body text and non (editable) form fields

  • The latest insider fast release is 16257.  I had a typo.

    Also, I have tested in Firefox and it behaves as expected, in that only what is shown as selected to the user is actually copy-able.

  • Microsoft Edge Team

    Changed Assigned To to “wptsixtri@microsoft.com”

  • You do bring up an interesting note though with the console logging. If one extrapolates, if a user can’t select text… should the getSelection() API return what was selected?

    It appears in Firefox, crossing though the non-selectable content voids the selection completely (no value in the log)… however in Chrome, it shows the full value.

    As for what can be copied to the clipboard?.. again extrapolating one could argue that if you can’t select it, you can’t copy it? but this gets muddy very quickly.

    In certain cases in a browser when you select and copy you get formatting details too. I’m less worried about what rules apply for copying.

    As for the JavaScript API… I’m not sure what the correct behavior here is. I feel that “user-select” at the CSS level is a presentation feature only. At the JavaScript level, where the developer has full control to extract the whole DOM… why are we blocking the selection from being returned in Firefox?

  • I want to be very careful here. The SPEC for user-select:none is purely about removing the ability for the user to accidentally select text content when directly interacting with it by clicking a button for example. If a user clicks the button down, but drags a bit left or right before releasing the developer doesn’t want the text on the button to highlight. Copying, Pasting, and JavaScript API access via getSelection() is a whole other topic, and not currently covered by the specs.

  • Yes, it appears in Firefox the click event does not fire in the case where the selection span’s a “user-select:none;” area.

    That seems to be a good distinction to keep in mind.  Thank you for the clarification.

    This bug have been corrected specifically for the issue you have submitted about the presentation aspect of "user-select:none", but only while the browser is active.  Let me explain.

    Case 1:
    While the browser is active, all recent versions of Edge since around ~15063.540 work as expected.  The highlighted link text is not selectable.

    Case 2:
    If after highlighting the area the user switches to another application or non-browser window, the entire area is shown as selected in 'grey’.

    I have attached screenshots.

    Thanks again for the help on this.  We will investigate this.

    Steve

    I have attached screenshots for 

  • Microsoft Edge Team

    Changed Assigned To to “Grisha L.”

    Changed Status to “Confirmed”

You need to sign in to your Microsoft account to add a comment.

Sign in