search

davidtheclark / react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
http://davidtheclark.github.io/react-aria-modal/demo/
MIT License
1.03k stars 96 forks source link

<html> tag receive inline styles on modal opening #82

Closed yuzhva closed 5 years ago

yuzhva commented 5 years ago

My HTML template looks like:

<html lang="en" class="my-class">
  <head>
    <! -- other HTML here -->
  </head>
  <! -- other HTML here -->
</html

When the modal is opened, I'm receiving inline style like:

<html
  lang="en"
  class="my-class"
  style="width: calc(100% - 0px); position: fixed; top: -93px; overflow: hidden;"
>

The trick if that CSS top style changes and that breaks my layout...

Depending on how much I scrolled from top of the page - tag top: style is dynamically changing.

How can I avoid of changing inline styled for HTML tag? (at the same time the content under modal should not be available for scrolling)

P.S: an inline style that is bad practice, but it's required in some cases. In the case when a global tag styling witch inline style - that is "ccc-combo" - it's better to avoid of such approach.

davidtheclark commented 5 years ago

You can prevent the inline CSS that conflicts with yours by not disabling the scroll: set scrollDisabled: false: https://github.com/davidtheclark/react-aria-modal#scrolldisabled.

That means you'll be able to scroll what's under the modal. It's a limitation. You could look into using https://github.com/willmcpo/body-scroll-lock to lock the scroll, instead. Maybe it will work better for you. If so, please let me know — we could consider switching this modal library's scroll lock from no-scroll (which locks with CSS) to body-scroll-lock (which I think locks with just JS).