Getting weird clipping on Backdrop when used with Docz

🐛 Bug report

Current behavior

The DialogBackdrop appears to be having some strange issues with its position in the DOM.

Any Playground after the modal that you trigger appears above/“to clip” the DialogBackdrop.

The Playground has these styles applied by Docz.

    top: 0;
    left: 0;
    z-index: 0;
    position: relative;
    width: auto;
    height: auto;
    padding: 0px;
    margin: 0 0 30px;
    background: transparent;
    box-sizing: border-box;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;

The DialogBackdrop has these styles applied by me:

  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  transition: opacity 300ms;
  opacity: 1;

  &.hidden {
    opacity: 0;
  }

Expected behavior

I expect the DialogBackdrop to be over all other elements in this page.

[diegohaz]

Thanks for the reproduction! 😃

Looks like the z-index on Playground is creating a new composite layer for the backdrop. If you remove z-index from the playground, it works.

The solution is indeed rendering DialogBackdrop in a Portal. We can think of a way to do that automatically if the dialog is modal.

[stramel]

@diegohaz I managed to get the issue reproduced inside a codesandbox.

Here is the link, let me know if you have any issues. https://codesandbox.io/s/github/stramel/reakit-issue-404/tree/master/