docs: revised anomalies race condition for Blink

Author: scriptura

app/UA0/styles/development/base.css

@@ -88,6 +88,7 @@ img {
   justify-content: center;
 }
 
+/*
 [class^='grid'] {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -102,6 +103,7 @@ img {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+*/
 
 .gap-top {
   padding-block-start: 1em;

docs/anomalies/collision-between-the-View-Transitions-API-and-the-hardware-Shadow-DOM.md

@@ -45,7 +45,11 @@ La panne est provoquée par une désynchronisation de frames (_Race Condition_)
 Le correctif consiste à imposer une étanchéité absolue de l'allocation mémoire des widgets avant même que l'API de transition n'intercepte l'arbre de rendu :
 
 ```css
-[class^='range'] input {
+[type='range'] {
+  /* @bugfix View Transitions */
+  /* @affected Chrome */
+  /* @path Isolation du Shadow DOM pour le compositeur matériel Blink/WebKit. */
+  /* Garantit que l'allocation mémoire du curseur n'interfère pas avec la capture de la texture du parent (#main) lors d'une transition. */
   isolation: isolate;
   will-change: transform;
   contain: layout paint;

styles/development/grid.css

@@ -256,28 +256,30 @@
   .m-order {
     order: var(--o, -1);
   }
-} /* @note Mémento de nos (presques) équivalences grid/flex codées ultérieurement : */
+}
+
+/* @note Mémento de nos (presques) équivalences grid/flex codées ultérieurement : */
 
-/* with Grid layout: */
+/* With Grid layout: */
 /*
 .summary {
   display: grid;
   gap: var(--gap);
 
-  @media (min-width: $sizeXS) {
+  @media (width < 35em) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (min-width: $sizeS) {
+  @media (width < 50em) {
     grid-template-columns: repeat(3, 1fr);
   }
 
-  @media (min-width: $sizeL) {
+  @media (width < 92em) {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 */
-/* with flexbox: */
+/* With flexbox: */
 /*
 .summary {
   display: flex;
@@ -287,15 +289,15 @@
   & > * {
     flex: 1 0 100%; /* = [flex-grow flex-shrink flex-basis]
 
-    @media (min-width: $sizeXS) {
+    @media (width < 35em) {
       flex-basis: calc(50% - var(--gap));
     }
 
-    @media (min-width: $sizeS) {
+    @media (width < 50em) {
       flex-basis: calc(33% - var(--gap));
     }
 
-    @media (min-width: $sizeL) {
+    @media (width < 92em) {
       flex-basis: calc(25% - var(--gap));
     }
   }

styles/development/input.css

@@ -1,3 +1,10 @@
+[type='range'] {
+  /* @bugfix View Transitions @affected Chrome @path Isolation du Shadow DOM pour le compositeur matériel Blink/WebKit. Garantit que l'allocation mémoire du curseur n'interfère pas avec la capture de la texture du parent (#main) lors d'une transition. */
+  isolation: isolate;
+  will-change: transform;
+  contain: layout paint;
+}
+
 .input {
   & label {
     display: inline-block;

styles/development/range.css

@@ -28,14 +28,6 @@
   margin-block-end: 1em;
 
   & input {
-    /* [PATCH VIEW TRANSITIONS] 
-       Isolation du Shadow DOM pour le compositeur matériel Blink/WebKit.
-       Garantit que l'allocation mémoire du curseur n'interfère pas avec 
-       la capture de la texture du parent (#main) lors d'une transition. */
-    isolation: isolate;
-    will-change: transform;
-    contain: layout paint;
-
     /* @see https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/ */
     grid-column: 1;
     grid-row: 2;