In my story I have lots of large background images (2560 x 1440 px), and have discovered that the background switch cannot happen at the same time as the passage transition otherwise it gets "jammed" and jerkyness happens as the browser struggles to figure out what to process first.
So I solve this by writing in the passage using the SugarCube replace macro set:
This way the image swap is delayed 100ms while the passage renders, and it becomes smooth, since now the browser knows to fully render the passage first. I then use different transition lengths to hide the delay. (e.g. the passage transition is set to 1.5 seconds so it's still underway while the image transitions).
My question is... what's a "safe" timing value? I started with 0.5 seconds, and that left too much of a noticeable gap. So I gradually pared it back to 100ms, which still seems safe. How low could I go? I.e. How long should a passage take to render ideally?
I can, of course, just experiment. But I wanted to throw this out there to see if there was any expert input based on what people know what's happening underneath.