Shifting page content, when Yii2 application runs in debug mode

I have just installed and run my first Yii2 application, after years of coding in Yii1. It runs, by default, in debug mode and offers a great and powerful debug infobar at the bottom of each screen. But… there’s one problem.

Upon each page refresh, there’s a few milliseconds period of time, when vertical scrollbar appears. And then it disappears. It causes entire content of page to shift left about 16px (when scrollbar is visible) and then shifts back right (when scrollbar disappears).

I have some suspissions, that this is because debug scrollbar is positioned to the bottom edge of screen using Javascript, not CSS. And thus, it appears for a few milliseconds, when page finishes loading and then it disappears, when $.documentready() function is fired, where debug infobar positioning code is probably stored. But, that’s pure speculations (I don’t have access to Yii2 code right now) and I may be terribly wrong.

Anyway, I don’t know, how it is possible, that such ugly design bug ever managed to appear in Yii2 repo and that no one took any care to fix this so far. But, I must admit, that this behavior simply mades me crazy each time I refresh any Yii2 app page. Is there any workaround for this problem?

I found one – disable YII_DEBUG and enable it, only whenever it is required. But that’s not a way at all.

you may make bigger header or footer in the layout.

then vertical scrollbar will be always visible.

what is your display resolution ?

The solution is as easy as adding this CSS code:

#yii-debug-toolbar {

	bottom: 0;

	left: 0;

	margin: 0;

	position: fixed;

	right: 0;

}

to either site.css or any other CSS file, that is included in frontend.

I got no damn idea, why Yii2 authors decided to position debug toolbar using Javascript and thus producing such ugly content shifting effect, while solution in form of CSS shifting could be so simple.

BTW: This solution is authored by my friend, Razzzo. It is fairly simple, so I would come with it myself, but he was first and all the glory goes to him! :>