-
Notifications
You must be signed in to change notification settings - Fork 7.2k
Description
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
- Access https://codepen.io/alvarotrigo/pen/eYqBoBb
- Click on the buton
- Try to scroll down