search

halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.03k stars 118 forks source link

Rationale behind `absolute` position on html, body, page-wrapper, content-wrapper? #84

Open xoofx opened 3 years ago

xoofx commented 3 years ago

Hey,

I'm evaluating to migrate my projects from bootstrap to halfmoon and so far I like it a lot! I love the usage of CSS variables, good job!

So, one issue I have been through is that for example I'm using tocbot which was working all fine with boostrap, but then with halfmoon the update of the toc was not working.

I discovered that halfmoon is setting absolute position to several top level elements (html, body, page-wrapper, content-wrapper) that are making it incompatible with tocbot (I don't think they can fix it in tocbot, I haven't followed the reason but it is likely that absolute is messing with scroll notifications or top position in some sort)

So I was able to override these positions to restore them to static, but the question is why halfmoon made the choice of making this containers absolute?

halfmoonui commented 3 years ago

Sorry for the late response, and thanks for bringing this up. The rationale was to support a few older browsers, and also fix some unexpected bugs that pop up here and there with the custom scrollbars. Admittedly, this has caused new issues like the one you mentioned, and also some other scroll issues, because the <body> does not scroll, the .content-wrapper does.

One option was attaching the .dark-mode class to the <html> element rather than the <body> and styling from there. This fixes the scrollbar issues and that can hopefully accommodate the default position property for the top level elements as well. Since these are essentially structural changes, I am going at this in a slow and methodical method so that nothing accidentally breaks. All that said, this should hopefully be fixed in one of the upcoming updates.

Achilles1515 commented 3 years ago

It's been some months since I looked into this, but I think at one point I concluded that scrolling (of .page-wrapper) is blocked while hovering over the table of contents on the Halfmoon docs site had something to do with these absolute positions. I unfortunately forget the finer details, but it's really annoying not being able to scroll (mouse wheel) while hovering over the table of contents.

ThaUnknown commented 3 years ago

guessing this is related to https://github.com/halfmoonui/halfmoon/issues/49 the fix I proposed works, I guess I'll make a PR will all my fixes for halfmoon