🐞 - Backdrop is not positioned properly when developer console is opened

[SebastianStehle]

🐞 - Backdrop is not positioned properly when developer console is opened

[hakimio]

Does this ever happen when dev tools are not open?
Anyway, you can try to set delayBeforeStepShow to see if that helps.

[SebastianStehle]

It happens while I am on a step and the backdrop is always visible. When I then turn on developer console, the backdrop is not updated. If I resize the window normally it gets updated.

[hakimio]

• Does this happen when developer console is not open? Yes or No?
• Have you tried delayBeforeStepShow to see if it helps?
• Does this happen when using smooth scroll feature?
• Can you reproduce the issue on Stackblitz without dev console: https://stackblitz.com/edit/angular-wau2z8 ?

[SebastianStehle]

I think you get me wrong. The flow is as followed:

• You go to a step, then the backdrop renders properly
• If you then open the developer console, the backdrop is not repositioned, because the resize event is not triggered.
• Therefore scolling and delayBeforeStepShow has no impact.

[hakimio]

If it's caused only by opening dev console, I don't think that's an issue for normal users.
If you manage to consistently reproduce the issue without dev console open/close, feel free to submit a new issue.

[SebastianStehle]

I can reproduce it here: https://stackblitz.com/edit/angular-wau2z8-lbkisp?file=src%2Fstyles.scss

You need a scroll container for that (see .container class). It also happens when I resize the window with Window + Arrow keys. So it also affects other users.

[hakimio]

That's not a bug with the library. When you are using custom scroll container, you have to specify it using scrollContainer config: scrollContainer: '.container'. Then everything works fine.

[hakimio]

Ok, another issue with your demo is that you have two main content scroll containers (.container and html). Normally you would have only one.

[hakimio]

Here is your reproduction fixed and working as intended: https://stackblitz.com/edit/angular-wau2z8-towkfa

[SebastianStehle]

Thanks. I found the same solution. I think I would probably set the html and body to overflow: hidden dynamically, because I cannot foresee what could actually break, if I change that, but this seems to work.