Skip to content

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

@alvarotrigo

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions