we finally learned to center a div, then browsers added sidebars
9 points by seg6
9 points by seg6
After opening and closing the Safari sidebar (Safari on iPadOS), the "centered" content div of this site does not stay centered.
Also, the post claims that centering used to be done by:
.thing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
when my (admittedly quite old) memory is that the traditional approach was to set a width on the div in some reasonably scalable unit and then both margin-left and margin-right to auto.
Quite often, when people mention "centering the div" they mean x and y, the dead center, hence the snippet in the opener.
As for Safari, it might be one of WebKit’s iPadOS sidebar/resize bug, thank you for the report!
Accessibility tip/request: please use the document scroll area, don’t place your own element inside it and make that the scroll area. Otherwise, keyboard navigation is all broken to begin with, and mouse-based scrolling will only work when the pointer is inside your scroll area, rather than the entire document as is expected.
Oh interesting, showing the example where it remained at the window center invoked a strong "no thats wrong" feeling in me. To me the sidebar is now encouraging on the centered content territory making it a distraction.
To be frank, I also don't like vertical tabs and sidebars in general for that reason. This just made it worse to me as well.
Discord still logs you out when you have vertical tabs enabled in firefox and close the browser because they try to detect devtools to hide your client token 🙃
Oh, it's my use of Tree Style Tabs that is causing this? It's been an annoyance for years!
Did you make this an extension, or is this active on your site by default? It's not entirely clear from your post. You mention the extension before you actually introduce it.
If your site is meant to be centring the div by default in my normal web browser, it's not working for me in Firefox, Chrome, or Edge on Windows.
Initially, I had it implemented on the website as well, separately from the extension, but I decided to revert that (as it forces the behavior on everyone viewing) and just keep it in the extension.