From c6a41fbb2354025b020412368b9614da3723d4a1 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 10 Sep 2025 23:03:53 -0400 Subject: [PATCH] index.html.in: two transition fixes First, the repositioning of the ticket also needs to be transitioned. This makes the QR animation much smoother. Second, it would seem that appending the "loaded" class (to enable transitions) can retroactively affect style changes that were made before the class was appended. The workaround for this is to do something that makes the browser re-flow the affected elements, and I guess calling focus() suffices to do that. So we add in a call to focus() before appending the "loaded" class to the ticket and its background; this ensures that the transitions are not enabled until after the initial ticket sizing, as was always the intent. --- index.html.in | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/index.html.in b/index.html.in index e2b4b2a..a56adea 100644 --- a/index.html.in +++ b/index.html.in @@ -642,8 +642,15 @@ } /* Enable CSS transitions for future scalings, namely - * for the QR focus animation. */ - tbbg.setAttribute("class", "loaded"); + * for the QR focus animation. The focus() thing here + * is a hack to force the browser to stop and think about + * the new transformations (defined above) BEFORE adding + * the class. Otherwise the "loaded" class can actually + * be added before the transformations are enabled, + * leading to transition effects! */ + tbbg.focus(); + t.classList.add("loaded"); + tbbg.classList.add("loaded"); } -- 2.49.0