diff -u b/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
--- b/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -247,11 +247,13 @@
 
 /* stylelint-disable-next-line unit-whitelist */
 
-@medianot all and (min-resolution: 0.001dpcm) and {
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
     .claro-details__summary::before {
       transition: none;
     }
   }
+}
 
 /**
  * Details summary focus.
diff -u b/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
--- b/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -321,12 +321,14 @@
 
 /* stylelint-disable-next-line unit-whitelist */
 
-@medianot all and (min-resolution: 0.001dpcm) and {
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) {
     .tabledrag-cell-content .tree {
       overflow: visible;
       min-height: 0;
     }
   }
+}
 
 .tabledrag-cell-content .tabledrag-handle::after {
   vertical-align: middle;
only in patch2:
unchanged:
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -192,7 +192,7 @@
  */
 /* stylelint-disable-next-line unit-whitelist */
 @media not all and (min-resolution: 0.001dpcm) {
-  @media {
+  @supports (-webkit-appearance: none) {
     .claro-details__summary::before {
       transition: none;
     }
only in patch2:
unchanged:
--- a/core/themes/claro/css/components/tabledrag.pcss.css
+++ b/core/themes/claro/css/components/tabledrag.pcss.css
@@ -245,7 +245,7 @@ body.drag {
  */
 /* stylelint-disable-next-line unit-whitelist */
 @media not all and (min-resolution: 0.001dpcm) {
-  @media {
+  @supports (-webkit-appearance: none) {
     .tabledrag-cell-content .tree {
       overflow: visible;
       min-height: 0;