https://xkcd.com breaks with vertical tabs installed. The page body elements float off to the right, with edges just off the page, varying by zoom level.
xkcd.com seems to use unusual centering or page sizing options, affected by all of these values.
body {
...
left: 50%;
width: 780px;
margin-left: -390px;
}
Top and bottom, but not middle, containers set their own width for offsets.
It's just the addition of the margin-left: 0px style at issue.
Solution
I think this body adjustment is done in SidebarHelpers#L32-L69. Could we increment/decrement margin-left if it exists, instead of setting it? Would you like a PR?
Related Concern
The style changes added to the body element inline are hard to debug, instead of in a file specific to the extension.
Just style="transition: margin 0.25s cubic-bezier(0, 0, 0.3, 1) 0s; margin-left: 0px;" is added inline to the body element tag, in full: <body style="transition: margin 0.25s cubic-bezier(0, 0, 0.3, 1) 0s; margin-left: 0px;" class="vsc-initialized">, from <body class="vsc-initialized">, with no sign of the source.
Suggestion
You could instead add/remove a class specific to this extension from the body when you want to toggle the style and allow the page to move over with the extension acting as a sidebar.
I wish these could be added and adjusted with classes. I'm not sure if there are performance or web browser styling rendering optimizations that benefit from less abstracted dependecies.
And toggle class addition with javascript, <body class="vsc-initialized"> <-> <body class="vsc-initialized vertical-tabs-body">, as suggested on Stack Overflow - inject css using content script.
Broken site
https://xkcd.com breaks with vertical tabs installed. The page body elements float off to the right, with edges just off the page, varying by zoom level.
xkcd.com seems to use unusual centering or page sizing options, affected by all of these values.
Top and bottom, but not middle, containers set their own width for offsets.
It's just the addition of the
margin-left: 0pxstyle at issue.Solution
I think this body adjustment is done in SidebarHelpers#L32-L69. Could we increment/decrement margin-left if it exists, instead of setting it? Would you like a PR?
Related Concern
The style changes added to the
bodyelement inline are hard to debug, instead of in a file specific to the extension.Just
style="transition: margin 0.25s cubic-bezier(0, 0, 0.3, 1) 0s; margin-left: 0px;"is added inline to the body element tag, in full:<body style="transition: margin 0.25s cubic-bezier(0, 0, 0.3, 1) 0s; margin-left: 0px;" class="vsc-initialized">, from<body class="vsc-initialized">, with no sign of the source.Suggestion
You could instead add/remove a class specific to this extension from the body when you want to toggle the style and allow the page to move over with the extension acting as a sidebar.
I wish these could be added and adjusted with classes. I'm not sure if there are performance or web browser styling rendering optimizations that benefit from less abstracted dependecies.
vt.css:
And toggle class addition with javascript,
<body class="vsc-initialized"><-><body class="vsc-initialized vertical-tabs-body">, as suggested on Stack Overflow - inject css using content script.