Search code examples
ioscsszurb-foundation-5

Foundation modal appears behind reveal background in iOS

I'm trying to make a confirmation modal appear on a button click. The modal appears, but behind the background that 'grays out' the rest of the page.

Relevant CSS:
.reveal-modal-bg {
  background: rgba(0,0,0,.75);
  z-index:2000;
}

.reveal-modal {
  border-radius:7px;
  border:none;
  padding:20px;
  z-index:9999;
}

As you can see, the z-indices are being set correctly. The modal appears correctly on desktop in Chrome, however using Safari in iOS 9 causes the modal to appear incorrectly. Can you anyone tell me how to get it back in front of the background? Thank you in advance

Solution

  • This works for me

    .reveal-modal { 
   z-index:2000 !important;
   -webkit-transform: translate3d(0,0,1px);
   transform: translate3d(0,0,1px);
}