CODEWITHSUNDEEP
cssreactjsmodal-dialog
alisontague
alisontague

Reputation: 329

Custom modal css style working on chrome not safari

I have a modal I created using ReactDOM.createPortal();. It works well except I can't seem to style the modal in a way that works on both Chrome and Safari.

html:

<body>
  <div id="main">
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
  </div>

  <div id="portal">
    <div>
      <div class="modal-wrapper">
        <div class="modal-card">
          <div class="row">
          </div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="background-overlay"></div>
      </div>
    </div>
  </div>
</body>

scss:

#portal {
  .modal-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  overflow: hidden;
  max-height: 100%;
  .modal-card {
    background: white;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    max-width: 800px;
    margin-top: 10px;
    width: 50%;
    overflow: auto;
    padding: 10px;
    max-height: 90%;
  }
  .close-button {
    position: relative;
  }
  .background-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;
  }
}
}

Please see https://jsfiddle.net/alisonmtague/am5jfr37/26/ using both safari and chrome.

On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal (background page scrolls instead). I expect the contents of the modal I'm creating to be pretty large so I need the modal to be scrollable. Ideally I would also like the #main div to not scroll when the modal is open.

Changing the z-index does not solve things

Upvotes: 0

Views: 176

Answers (1)

tao
tao

Reputation: 90312

When you open the modal, apply a class to your <body> (i.e. fixed) and:

body.fixed {
  overflow: hidden;
  position: fixed;
}

Obviously, you need to remove it when closing the modal.

Additionally, your modal scroll container should have:

{
  -webkit-overflow-scrolling: touch;
}

..., besides overflow-y: auto; and a fixed height, smaller than 100vh. That's about it.

Note: Depending on device, Safari version and iOS version you might not need both (second one being the real important one), but with both you get max compatibility.

Ref: "On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal":

Assuming adding position: relative; to .modal-card wouldn't work: what is stopping you from placing .background-overlay as first child of .modal-wrapper and .modal-card as second?

Upvotes: 1

Related Questions