Wybór użytkownika: dziedziczenie nie działa w chrome 62

Question

Właśnie zaktualizowałem przeglądarkę Google Chrome na moim komputerze PC i Mac do wersji 62, a właściwość CSS user-select: all przestała działać poprawnie.

Jeśli rodzic mający user-select ma wartość none, a element potomny ma wartość user-select, właściwość nadrzędna nie jest nadpisywana poprawnie.

-webkit-user-select: all; 
-moz-user-select: all; 
-ms-user-select: all; 
user-select: all; 

Czy ktoś inny doświadczył tego i wie, czy jest to błąd w nowej wersji Google Chrome, czy też jest właściwy sposób wdrożenia tego?

Oto kod wykazując problemu (użyj Chrome 62 widzi ten problem) - JSFiddle:

div { 
 
    margin: 5px; 
 
} 
 
.parent { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.child { 
 
    -webkit-user-select: text; 
 
    -moz-user-select: text; 
 
    -ms-user-select: text; 
 
    user-select: text; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    Parent has user-select set to none, Try to select this text 
 
    </div> 
 
</div> 
 

 
<div class="child"> 
 
    No parent, Try to select this text 
 
</div>

Answer 1

To jest problem w przeglądarce Chrome. Błąd został już zgłoszony. Więcej szczegółów na temat błędu można znaleźć w innym (nie działającym przykładzie) pod numerem this bug report.

---

Dopóki błąd nie zostanie naprawiony, możliwe jest użycie niektórych skryptów JavaScript w celu zachowania. Zobacz this answer on StackOverflow.

---

Innym rozwiązaniem non JavaScript byłby następujący:

.parent :not(.selectable-all) { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.selectable-all { 
 
    -webkit-user-select: all; 
 
    -moz-user-select: all; 
 
    -ms-user-select: all; 
 
    user-select: all; 
 
}

<div class="parent"> 
 
    <span>user-select set to none and not selectable all.</span> 
 
    <div class="child selectable-all"> 
 
    Parent has user-select set to none, Try to select this text 
 
    </div> 
 
</div> 
 

 
<div class="child selectable-all"> 
 
    No parent, Try to select this text 
 
</div>

Answer 2

Spróbuj zmienić user-select:all do user-select:text

CSS:

div { 
    margin: 5px; 
} 

.parent { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.child { 
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text; 
} 

Demo: https://jsfiddle.net/lotusgodkk/12jfpzys/2/