From ff7a2aa0ea1034958219d111645697ac241c2358 Mon Sep 17 00:00:00 2001 From: Richard Hansen Date: Thu, 24 Mar 2022 03:25:07 -0400 Subject: [PATCH] css: Immediately transition visibility when showing popup For reasons I don't understand, an activated popup was visible during transition even though the boolean `visibility` property didn't switch to `visible` until the end of the 0.3s transition. This prevented input elements from getting focus until the end of the transition. Now input elements can get focus right away. --- src/static/css/pad/popup.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css index 65bb2583..e9d9ff65 100644 --- a/src/static/css/pad/popup.css +++ b/src/static/css/pad/popup.css @@ -2,13 +2,16 @@ position: absolute; top: 10px; right: 30px; - transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75); + /* visibility must transition immediately so that input elements inside the popup can get focus */ + transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75), visibility 0s; z-index: 500; } .popup:not(.popup-show):not(#users.chatAndUsers) { opacity: 0; transform: scale(0.7); + /* visibility must not change to hidden until the end of the transition */ + transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75); visibility: hidden; }