Transform translate not working as expected

Question

ISSUE FIXED NOW

I have a custom modal which looks like so:

However as you can see it isnt centered in the viewport.

The containing parent of the modal content has a class of "modal".

Here is my CSS for that:

.modal {
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    box-shadow: 5px 5px 20px black;
    border-radius: 5px;
    overflow: hidden;
}

I would of assumed that this would center the modal perfectly since the following criteria is met:

1. The modal code is out of the main section but before the closing body tag
2. The modal is position fixed with a top and left of 50% and a transform: translate() of -50%, -50%.

But it does not center the modal perfectly as expected and I cannot figure out why. Infact, in chrome dev tools, it ignores my transform: translate() statement for some reason, see here:

I did attempt to use the -webkit-transform:translate() before anyone asks but it did not work either.

Any ideas?

EDIT:

Incase anyone asks, the reason I have transform: scale(0) and so on, is because of the "is-open" class which scales the modal up.

.modal.is-open {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

And the main section also gets a class of "modal-open" which just adds the blur you can see.

.modal-open {
    -webkit-filter: blur(5px) grayscale(50%);
    filter: blur(5px) grayscale(50%);
    z-index: 0;
    pointer-events: none;
}

EDIT 2:

I altered the CSS transform as suggested to include both transforms in 1 (never had to do that before, it usually works with seperate statements but I decided to take the advice anyhow) and it didn't work, see here:

You can also see here my HTML markup, showing the "is-open" and "modal-open" classes on their respective elements here:

Still having issues as you can see, any other ideas?

EDIT 3:

Here is a mini-snippet of the modal and the issue.

/* MODAL STYLES */

.modal {
  background: white;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: scale(0) translate(-50%, -50%);
  transform: scale(0) translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: 5px 5px 20px black;
  border-radius: 5px;
  overflow: hidden;
}
.modal .modal-inner {
  margin: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.modal .modal-inner .modal-title,
.modal .modal-inner .modal-body {
  margin: 0 0 20px 0;
}
.modal .modal-inner .modal-body video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.modal .modal-inner .modal-title {
  border-bottom: 1px solid grey;
}
.modal .modal-inner .modal-footer {
  border-top: 1px solid grey;
  padding: 20px 0 0 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.modal .modal-inner .modal-footer .modal-close-button {
  background: #190e8c;
  padding: 10px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}
.modal .modal-inner .modal-footer .modal-close-button:hover {
  box-shadow: inset 2px 2px 2px black;
  background: navy;
}
.modal.is-open {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.modal-open {
  -webkit-filter: blur(5px) grayscale(50%);
  filter: blur(5px) grayscale(50%);
  z-index: 0;
  pointer-events: none;
}

<div class="modal-open">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar sem enim, eget fringilla nibh aliquam eget. Nulla sed diam dictum, sodales orci quis, tempus sapien. Proin suscipit posuere pretium. Mauris scelerisque nulla non sapien sollicitudin
    aliquet. Pellentesque ac purus sit amet justo dictum consectetur. Maecenas luctus dignissim ultricies. Nunc finibus laoreet pretium. Pellentesque augue mi, tincidunt a varius nec, mollis a turpis. Aenean lectus magna, commodo non rhoncus quis, dignissim
    vitae neque. Donec sollicitudin risus eget ligula convallis mattis. Proin cursus fringilla sodales. Vivamus hendrerit nisl nec rhoncus maximus.
    <br>
    <br>Duis nec fermentum sem, non mollis nisi. Maecenas nec varius purus. Donec hendrerit erat in eros euismod rutrum. Nullam justo nisl, mollis et dolor vel, placerat maximus sapien. Cras volutpat molestie tellus vel semper. Nullam eleifend arcu arcu,
    eleifend dignissim tellus facilisis ac. Integer tellus nibh, ultricies eu orci at, ultrices luctus urna. Ut consequat neque vel tellus venenatis imperdiet. Phasellus nec tellus libero. Curabitur ornare odio velit, cursus imperdiet quam mollis sollicitudin.
    Aliquam convallis interdum ullamcorper. Praesent euismod lectus vitae urna luctus porttitor. Integer pharetra sodales eros.
    <br>
    <br>Nam pharetra blandit ante. Ut sed sem ante. Proin a porta quam, ut laoreet enim. Donec ullamcorper, arcu ut iaculis malesuada, urna sapien bibendum sapien, in ullamcorper dui odio vel orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    Maecenas lorem eros, interdum non elit sit amet, pharetra laoreet enim. Proin ipsum elit, interdum ut elementum non, cursus in ipsum. Donec ac elit mollis, cursus diam nec, molestie urna. Sed vitae vulputate enim.
    <br>
    <br>Nulla facilisi. Ut at euismod orci, quis posuere enim. Quisque interdum feugiat commodo. Fusce interdum massa non lorem tempor tristique. Donec accumsan euismod dictum. Donec aliquet rhoncus consectetur. Quisque semper in neque vel elementum. Quisque
    auctor magna et augue feugiat tempor non quis erat. Curabitur consequat accumsan lectus faucibus dignissim. Mauris sagittis hendrerit velit at venenatis. Aliquam varius mauris eu egestas dictum. Ut quis posuere ex, tincidunt placerat arcu. Proin et
    aliquet augue.
    <br>
    <br>Pellentesque a vehicula nisl. Donec pulvinar lectus quis arcu gravida luctus. Donec convallis ante quam, eget tempus est tempus non. Ut fringilla sem non orci suscipit sollicitudin. Nulla vulputate vitae sem non imperdiet. Vestibulum lobortis dictum
    ex. Integer volutpat scelerisque massa nec aliquet. Ut auctor lobortis libero, id lacinia nulla sagittis non. Nunc et hendrerit nibh, in eleifend sapien.
    <br>
    <br>Phasellus finibus quam sed magna volutpat, id venenatis lectus mollis. In hac habitasse platea dictumst. Mauris cursus fringilla lorem, condimentum blandit massa rutrum vitae. Donec in dictum orci. Donec ut porta massa. Sed blandit, lorem at sagittis
    aliquet, leo mi luctus diam, ac gravida lacus ligula et eros. Pellentesque a eros nec quam commodo pharetra. Maecenas facilisis arcu vitae ipsum venenatis rutrum. Suspendisse nunc sem, dapibus eu ultrices in, posuere quis nunc. Praesent a dui a lacus
    dignissim suscipit at vel enim.
    <br>
    <br>Vivamus convallis, lorem et sodales aliquam, neque lorem condimentum eros, vitae tempus urna justo ac sem. Phasellus malesuada venenatis metus, vel lobortis nisi porttitor vel. Proin aliquet odio at dignissim tristique. Proin euismod tincidunt mauris,
    vel egestas nisl rhoncus vitae. Praesent at pulvinar ex, at egestas ex. Etiam id risus ut justo aliquet malesuada sit amet in libero. Phasellus ac luctus sem, eu bibendum sem. Nunc maximus libero sit amet neque efficitur, sit amet iaculis est euismod.
    Ut tortor lorem, ornare placerat metus iaculis, porta blandit sem.
    <br>
    <br>Sed tempor augue enim, eget tristique ipsum euismod vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet, urna eu vestibulum ullamcorper, elit nisi porttitor nisi, quis dignissim justo massa vel sem. Morbi non est velit. Vivamus
    tempus dapibus dignissim. Suspendisse eget pellentesque dui. Sed tempus, orci at blandit porttitor, dui urna consequat risus, vel feugiat ex dolor at arcu. Maecenas semper porttitor lacus, et porta tortor tristique nec. Phasellus finibus, enim tempus
    ullamcorper ullamcorper, lorem metus varius leo, ac fringilla augue dolor ac ipsum. Morbi tellus metus, fermentum vitae nulla eget, vulputate viverra sem. Morbi semper tellus nec eros eleifend tincidunt.
    <br>
    <br>Sed diam metus, scelerisque pharetra feugiat nec, pharetra eu dui. Nulla auctor mauris nec nunc viverra dignissim. Maecenas placerat massa sed felis dapibus, sed efficitur leo luctus. Aenean finibus sodales nisl, id faucibus nulla tempor et. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam vel sodales nunc. Nullam a nisl et sem euismod ultrices at mattis leo. Proin id lectus a sem bibendum pellentesque vitae a arcu.
    <br>
    <br>Mauris ultricies pretium justo, eu aliquam metus faucibus sit amet. Sed eu nulla eu ligula suscipit rutrum sed sit amet sapien. Sed auctor fringilla vestibulum. Maecenas accumsan pretium egestas. Proin iaculis lorem vitae tellus pharetra faucibus.
    Pellentesque tincidunt est et metus suscipit tristique. Cras gravida non arcu quis porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis, ligula at efficitur fringilla, elit tortor vehicula
    urna, a sodales libero libero non neque. Sed et accumsan metus, vel pharetra magna. Duis est erat, eleifend sed volutpat non, hendrerit ac mi. Nulla quis odio non arcu feugiat tempus ac vitae ipsum. Nulla ligula quam, pulvinar tempus imperdiet eget,
    semper quis sapien.
  </p>

</div>

<div class="modal is-open" id="modal">
  <div class="modal-inner">
    <div class="modal-body">
      <p>
        urna, a s is-openodales libero libero non neque. Sed et accumsan metus, vel pharetra magna. Duis est erat, eleifend sed volutpat non, hendrerit ac mi. Nulla quis odio non arcu feugiat tempus ac vitae ipsum. Nulla ligula quam, pulvinar tempus imperdiet
        eget, semper quis sapien.
      </p>
    </div>
    <div class="modal-footer"><a href="#" class="modal-close-button">Close</a>
    </div>
  </div>
</div>

Answer 1

As from your snippet. I see that the modal have transformed with both of scale and translate.

.modal {
  -webkit-transform: scale(0) translate(-50%, -50%);
  transform: scale(0) translate(-50%, -50%);
}

When you are toggling the is-open class, it will override it with -webkit-transform: scale(1);. And so you could combine the both transforms as following:

.modal.is-open {
   -webkit-transform: scale(1) translate(50%, 50%);
}

Answer 2

You have two transform properties, but you need to combine them:

transform: translate(-50%, -50%) scale(0);

You have to combine them in your added class as well to prevent overriding them in .modal.

.modal.is-open {
    transform: translate(-50%, -50%) scale(1);
}

Here is your updated code working with the .modal.is-open change: JS Fiddle