Workarounds for text in inputs disappearing on selection in Google Chrome

Sometime between Google Chrome version 35.0.1916.153 and 36.0.1985.125, the way the 'color' CSS property is handled with the ::selection selector changed. dom.css applies "color: transparent" to selections inside elements with the enyo-unselectable class (".enyo-unselectable::selection, .enyo-unselectable ::selection"). Our app applies enyo-unselectable to the body element. This is causing an annoying effect in input and textarea elements where selecting their content appears to delete it. I'm not sure if it's a bug in Chrome or an intentional change, which given ::selection is not part of the CSS standard is possible.

If you have Chrome, you can see it in this JSFiddle: http://jsfiddle.net/MatthewGidcomb/P3eBH/ . On Chrome, highlighting the text will make it disappear; removing the class from body will fix it. It works fine in Firefox, Safari, or IE, or if you remove the class from the body element.

I'm working around it by changing the second part of the selector at line 55 of dom.css to ".enyo-unselectable div::selection", but I'm wondering if anyone else has encountered this, and if so what the best workaround would be. Should we not apply enyo-unselectable to body (we did at the start of work on the app in 2012 because that was what Ares did, and we have drag and drop functionality that relies on most of the app being unselectable)?

Comments

  • Thanks for looking into it. After finding problems with my initial approach, I ended up replacing "enyo-unselectable" on body with our own class that applies just the user-select rules. That works for us because we just need to suppress text selection during drag and drop, but I don't think it's a good solution in general.
Sign In or Register to comment.