prevent the page from flickering when opening multiple slideouts

[i-just]

Description

The slideout view transitions were struggling a bit in some browsers when opening multiple slideouts from one another.

While FF and Safari handled them just fine, Chrome started to struggle around opening slideout 6 in a row (earlier with some other browsers). The content would flicker, and in some cases, once the slideout was open, not all the content was visible. In such a case, simply scrolling up or down would fix the rendered view.

This would only happen if you don’t have reduced motion preference enabled and if the browser window is large enough for the slideouts to slide in from the sides (not the bottom).

The transitions we use to animate the slideout into place involve changing the left/right position as well as changing the opacity of the shade. We already use the will-change CSS property to improve the performance of the slideout open/close animation, but we only mentioned the inset-inline-start and inset-inline-end values.

Adding opacity to that list makes the transition run smoothly in Chrome, but it doesn’t improve behaviour in Brave, Ecosia, or Arc. Interestingly, some browsers, like FF and Safari, run the transitions as expected even without will-change. I tested a few combinations, and the option that works best across all browsers that I tested with (FF, Safari, Chrome, Brave, Ecosia, Arc) is will-change: transition;.

Related issues

#18255