That's an awfully big assumption. For starters, you're assuming that the browser window itself is centered on the screen, and that the device is centered in front of the user.
I don't think this is the point of centering an element horizontally at all, and the result you have created here is not at all what I as a user want.
Here in Canada, the mobile website for anything related to Indian immigration (Indian passport, visa etc) is done via this absolutely goofy website with multiple levels of UI elements and popups covering the content. Have a look on mobile:
https://www.blsindia-canada.com/ottawa-jurisdiction/index.ph...
Anyway, I wouldn't say it currently behaves nicely (like something I would like to reuse anywhere whatsoever). Tested on Firefox opening Bookmarks on the left. First off, there is this ugly flicker, as browser first renders the "wrong" version, then your JS "fixes" it. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar.
And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you.
1) the sidebar covers the content, while the content has blank space to the right, or
2) the content moves off the right edge of the screen, leaving a large blank space to its left.
Both of these are wrong. If I have a sidebar open, the site is now narrower, stop trying to be clever.
My immediate reaction to this is why is the browser giving the site this information, and could we stop.
josefrichter•59m ago