Bug: Simple page transition causes overflow-x [video]

[mirague]

I've implemented a simple fade transition from a games listing to a simple game. Whenever I transition there's a flashing horizontal scrollbar appearing, which doesn't appear when using a normal {{outlet}}. I've tried disabling all of my css selectors and keeping the elements in the target route to a minimum, even to the point of removing almost anything.

application.hbs

{{top-bar}}

<main>
  {{liquid-outlet}}
</main>

transitions.js

export default function () {
  this.transition(
    this.fromRoute('games'),
    this.toRoute('game'),
    this.use('fade', { duration: 400 }),
    this.reverse('fade', { duration: 400 })
  );
}

Video (x2 slow motion)

https://www.youtube.com/watch?v=4r3nsceDnTI Pay close attention to the horizontal bar that briefly appears on the transition.

workaround

A hack around this jumpy behaviour is:

body {
  overflow-x: hidden;
}

But this is obviously not a lasting solution. Any thoughts?

[winne42]

@mirague Which version of Liquid Fire did you use? Is this still an issue or can this issue be closed?

[mirague]

Haven't been using Ember for years now - feel free to close it!