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.
pull/5485/head
Richard Hansen 2022-03-24 03:25:07 -04:00
parent 56d6a1800b
commit ff7a2aa0ea
1 changed files with 4 additions and 1 deletions

View File

@ -2,13 +2,16 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 30px; 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; z-index: 500;
} }
.popup:not(.popup-show):not(#users.chatAndUsers) { .popup:not(.popup-show):not(#users.chatAndUsers) {
opacity: 0; opacity: 0;
transform: scale(0.7); 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; visibility: hidden;
} }