quatuorbellefeuille.com

commit e5f3fa40e87c4af85eff633a37e4f1d8ca2d0d8e
parent 271a067775de291367988e44e6d916401f21dca3
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun, 17 Jan 2021 13:57:31 +0100

Sidestep an issue with Safari

Can't call it a bug yet; haven't seen the problem documented.

Diffstat:
M
commun.css
 | 
23
++++++++++++-----------

1 file changed, 12 insertions(+), 11 deletions(-)
diff --git a/commun.css b/commun.css
@@ -231,16 +231,20 @@ footer.legal {
         font-size: 0.8rem;
     }
 
+    /* Ideally, we'd use display: grid to have labels aligned.
+     * Unfortunately, afaict on mobile Safari brainfarts and fails to
+     * move the input to its fixed top-right position when it is
+     * checked; instead it moves it… somewhere…
+     *
+     * Therefore, use display: flex and absolute positions insteaad.
+     */
     .togglable {
-        display: grid;
+        display: flex;
         position: relative;
-        grid-template-columns: 2.4rem auto;
         align-items: center;
         --close-size: 2rem;
     }
     .togglable > input.toggle {
-        z-index: 2;
-        grid-column: 1;
         position: absolute;
         width: var(--height);
         height: var(--height);
@@ -249,8 +253,7 @@ footer.legal {
         cursor: pointer;
     }
     .togglable > img.button.open {
-        grid-column: 1;
-        justify-self: center;
+        padding: calc(0.1 * var(--height));
         width: calc(0.8 * var(--height));
         height: calc(0.8 * var(--height));
         object-fit: contain;
@@ -270,10 +273,8 @@ footer.legal {
         z-index: 4;
     }
     .togglable > label {
-        grid-column: 2;
-        height: 100%;
-        display: flex;
-        align-items: center;
+        position: absolute;
+        left: 2.6rem;
         cursor: pointer;
     }
     .togglable > .content {
@@ -332,7 +333,7 @@ footer.legal {
         margin: auto;
     }
 
-    .social img {
+    .social > .content img {
         width: 3em;
         margin-top: 0.5em;
         margin-bottom: 0.5em;