Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Broken Sidebar positioning on certain websites #4284

Closed
mnholtz opened this issue Sep 14, 2022 · 1 comment · Fixed by #4285
Closed

Broken Sidebar positioning on certain websites #4284

mnholtz opened this issue Sep 14, 2022 · 1 comment · Fixed by #4285
Labels
bug Something isn't working triage user experience Improve the user experience (UX)

Comments

@mnholtz
Copy link
Collaborator

mnholtz commented Sep 14, 2022

Some websites, like tesla.com, produce Sidebar alignment issues (see below).

Screen Shot 2022-09-14 at 9 09 46 AM

We discovered recently that most of these occurrences are probably due to certain properties, like filter and perspective, applied to the <body> element creating a new containing block for the Sidebar's position: absolute property, breaking the margin alignment.

In tesla.com's case, for example, this is the perspective property being applied to <body>.

Perhaps with this information there is a way we can fix the Sidebar alignment on websites like these.
@mnholtz mnholtz added bug Something isn't working user experience Improve the user experience (UX) triage labels Sep 14, 2022
@fregante fregante self-assigned this Sep 14, 2022
@fregante
Copy link
Contributor

It seems that merely appending the sidebar to document.documentElement instead of document.body fixes this specific case. I can send a quick PR.

However we're always at the mercy of the host website. Even if we place it in the Shadow DOM the website can still affect the shadow root element.

Eventually it would be nice to move to the native sidebar, should Chrome ever implement it:

@fregante fregante mentioned this issue Sep 14, 2022
Merged
1 task
@fregante fregante removed their assignment Sep 14, 2022
BLoe pushed a commit that referenced this issue Sep 16, 2022
@fregante
#4284: Append sidebar iframe to html element for broader compatibil…
ceb8ad8 
…ity (#4285)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working triage user experience Improve the user experience (UX)
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#4284: Append sidebar iframe to html element for broader compatibility pixiebrix/pixiebrix-extension
2 participants
@fregante @mnholtz