On animating what you can't see

I’ve been polishing DuckDuckGo for iOS’s floating UI, a glass-capsule toolbar that morphs and collapses much like Safari’s. The transition between the tab switcher and a web page took four attempts to fix because the first three were working at the wrong layer. The wider pass covered every state around that toolbar, including how it collapses during a scroll and how it makes room for a focused address field. Each change is small in isolation, but together they decide whether the browser chrome feels like one coherent object or a stack of views catching up with each other. The raw problem Switch from the tab switcher back to a tab and, in slow motion, you’d see a faint double image of the bottom toolbar: two overlapping copies of the back and forward arrows, tab count and menu button. Everything else about the transition looked right, which made it easy to assume this was a sequencing problem: retime the fade, adjust the crossfade, tighten the easing. Three rounds of that changed what…