search

elad2412 / the-new-css-reset

The New Simple and Lighter CSS Reset
https://elad2412.github.io/the-new-css-reset/
MIT License
2.26k stars 229 forks source link

TNCSSR + `-webkit-user-select: none` Breaks Text Input In Safari #43

Closed fweth closed 2 years ago

fweth commented 2 years ago

When setting -webkit-user-select: none on the body, I can't type into text input fields in Safari, see here (code). Not sure what is happening exactly here (in Chrome everything works fine), but it seems related to TNCSSR. Feel free to delete if this is offtopic.

Fasunle commented 2 years ago

Hello,

I don't know what exactly you want to achieve. Could you please provide some more context?

fweth commented 2 years ago

When I test the CodeSandbox above on Safari, I can't type text in the input field. This only happens

TNCSSR with user-select: none does not envoke this behaviour in the Chrome browser. So I can't really explain it, but it's definitely a change of behaviour I wouldn't expect from importing the TNCSSR style sheet.

fweth commented 2 years ago

The problem seems to be introduced by input { -webkit-user-select: unset } which is implicitly called by the first statement in the reset. Apparently in Safari, the user agent style sheet has -webkit-user-select: text for the input element and text input is not working when this value is set to none. But without the reset, setting -webkit-user-select: none on the body also isn't inherited by the input field, as it has its own value already. In Chrome, the user agent style sheet sets no value for user-select on the input field, and setting it to none seems to not change its behaviour. So feel free to interpret this as bug or not, for me it was at least unexpected.

elad2412 commented 2 years ago

Hi @fweth,

Sorry for checking it out so late. Added patch to prevent it for hapaning in the new version 1.7.0.

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input ,textarea {
    -webkit-user-select: auto;
}

Safaru bug fixed - Issue Closed