Third party scripts can modify "body" inline styles conflicting with FP

[alvarotrigo]

I noticed some third party plugins or components modify the inline styles of the body element.
For example, when opening and closing a burger menu some set the overflow attribute to an empty string overflow: '', which results in fullPages.js not being scrollable anymore when in responsive mode.

It basically overwrites the inline attribute fullPage.js sets on the body, which is overflow: visible;.
And then it inherits the one from .fp-enabled body, html.fp-enabled which is overflow: hidden.

So I'm thinking we can probably:

1- Set those inline attributes with !important.
2- Or instead create a new class for those also with !important on them.

This will make it a bit more resistant to third-party plugins playing with those properties. Although it won't make it resistant to other !important declarations.

Reproduction:

https://codepen.io/alvarotrigo/pen/eYqBoBb

Steps

1. Access https://codepen.io/alvarotrigo/pen/eYqBoBb
2. Click on the buton
3. Try to scroll down

[meceware]

If any of the inline CSS has !important on it, it can definitely effect custom CSS on 3p libs, and may break their functionality. I'd go with the option 2.

Another idea would be to add another CSS rule that has the body with overflow hidden with inline overflow hidden at the same time, so even if 3p library remove the inline CSS, overflow would still be there without the !important.

[alvarotrigo]

Another idea would be to add another CSS rule that has the body with overflow hidden with inline overflow hidden at the same time, so even if 3p library remove the inline CSS, overflow would still be there without the !important.

That's actually a great idea 👍

Reproduction of the issue:
https://codepen.io/alvarotrigo/pen/eYqBoBb

Adding another CSS class as suggested, does the trick:
https://codepen.io/alvarotrigo/pen/poMNBeZ

[alvarotrigo]

Fixed on version 4.0.30! 🥳