search

mmistakes / minimal-mistakes

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.
https://mmistakes.github.io/minimal-mistakes/
MIT License
12.48k stars 25.74k forks source link

Footer breaks when using a browser toolbar #2281

Closed stanulilic closed 5 years ago

stanulilic commented 5 years ago

I use Chrome together with Mozbar Chrome extension from Moz to see the Domain Authority and Page Ranking score for every page I visit.

I noticed the theme footer breaks when I have enabled the toolbar as you can see in the screenshot below:

Screenshot from 2019-10-13 21-05-55

When I disabled it, the footer looks fine:

Screenshot from 2019-10-13 21-06-18

I also tried this with a different toolbar SEOQuake from SEMrush.

Screenshot from 2019-10-13 21-11-15

As you can see the footer breaks again.

It happens on my blog and It also happens here: https://mmistakes.github.io/minimal-mistakes/ as you can see from the screenshots. It is worse on my blog because it blocks the pagination.

Screenshot from 2019-10-13 21-30-21

You can easily recreate this by trying the Mozbar extension and then visit https://mmistakes.github.io/minimal-mistakes/.

mmistakes commented 5 years ago

There's a bit of JavaScript that evaluates the height of the page to determine how much space it needs to stick to the bottom of the page.

My guess is the Moz and SEOrush toolsbars screw with that because they are adding their own sticky panels to the DOM. Not sure if there's anything I can do about how other scripts mess with the theme.

mmistakes commented 5 years ago

The Mozbar is injecting inline CSS to the body element to absolutely position it, which messes with the page layout. Don't think there's anything I can do about that.

body.mozbar-margin-wGA7MhRhQ3WS {
    margin-top: 43px;
    position: absolute;
    width: 100%;
}
stanulilic commented 5 years ago

Okay. But I noticed on your website https://mademistakes.com/articles/, the footer doesn't break when using a toolbar. Perhaps, the solution could there?

mmistakes commented 5 years ago

mademistakes.com is my personal site, it's not using the Minimal Mistakes theme at all. It's a custom built Jekyll site... with a completely different layout.

mmistakes commented 5 years ago

The faux-sticky footer effect will need to be rethought to get around plugins that try to rewrite the height of the page.

Flexbox might be able to help here instead of absolutely positioning the footer and then using the JavaScript hack to clear it.

stanulilic commented 5 years ago

It would be awesome if it gets fixed. I was really worried that people who are using the toolbars wouldn't be able to access the pagination. They would simply assume that the site is broken.