I have a roadmap component where bars are arranged by time in horizontal axis (and by anything depending on filters for vertical axis) I am trying to scroll to an HTMLElement using scrollIntoView. The scrolling involves both vertical and horizontal scrolling. I am using scrollIntoView method.

roadmapItemEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'auto' });

It generally works as expected. However, when it autoscrolls to a bar in the right side of the current activeElement, the whole page shifts to the left, exposing white space. This happens only in Chrome.
(Note: I tried all combinations of the scrollIntoView options. Nothing changed)

Normal:

After autoscroll to a bar on the right: (Note: This only gets fixed if I autoscroll to a bar on the left)

I unfortunately cannot share much code, thus I don't expect complete hand-holding here. However, I just need to know what to look for. Here are my questions:

1. What is this white space part of exactly? (body?) Can it be rid of?
2. In what situations does this generally occur?
3. Are there alternatives to scrollIntoView that could be more suitable for such autoscrolling (more fine-tuned for horizontal scroll perhaps?)?
4. Probable reason why only Chrome is affected.