transform: scale elements within transformed container are not positioned correctly

Question

I have just noticed a weird bug I could replicate on JSFiddle.

I use a custom design for checkboxes, and my V icon is being animated from transform: scale(0) to transform: scale(1) on click. Nothing too crazy.

The problem starts when I place a checkbox within another element with a transform property. I use iziModal library in my example to demonstrate it.

Open the results page on full screen and try following these steps in order to see the exact issue:

1. Trigger the modal. nothing seems to be wrong with the checkboxes.
2. Toggle the scrollbar of the modal (with the radio buttons below). this will make #modal-content really high.
3. Trigger the modal. you can now see the V icon is not at its correct position during the transition.
4. Now apply -webkit-backface-visibility: hidden; with the second radio button group.
5. Trigger the modal. you can now see that the checkboxes themselves are offsetted during the transition.

Notes:

• -webkit-backface-visibility: hidden; on other elements than input[type=checkbox] doesn't seem to change anything.
• the problem happens only when body is direction: rtl;.

$(function() {

  $("#modal").iziModal();

  $("#button").click(function() {
    $("#modal").iziModal('open');
  });

  $(".modal-close").click(function() {
    $("#modal").iziModal('close');
  });

  $("input[name=scr]").on('change', function() {
    if ($(this).val() == 'true')
      $("body").addClass('scrollbar');
    else
      $("body").removeClass('scrollbar');
  });

  $("input[name=wbv]").on('change', function() {
    if ($(this).val() == 'true')
      $("body").addClass('with-wbv');
    else
      $("body").removeClass('with-wbv');
  });

})

body.with-wbv input[type=checkbox] {
  -webkit-backface-visibility: hidden;
}

body.scrollbar #modal-content {
  height: 2000px;
}

#modal #modal-content {
  background: rgba(0, 0, 0, 0.05);
  border: 2px dashed rgba(0, 0, 0, 0.15);
  margin: 1em;
  padding: 1em;
}

input[type=checkbox] {
  position: relative;
  border: 0;
  margin: .5em;
  -webkit-appearance: none;
  border-radius: 2px;
  vertical-align: middle;
}

input[type=checkbox]:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  display: table;
  width: 4px;
  height: 9px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  transition: 240ms;
  transform: rotate(45deg) scale(0) translateZ(0);
}

input[type=checkbox]:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  transition: 240ms;
  box-shadow: inset 0 0 0 0 #08c1c6;
}

input[type=checkbox]:checked:before {
  transform: rotate(45deg) scale(1) translateZ(0);
  transition-delay: .05s;
}

input[type=checkbox]:checked:after {
  border-color: #08c1c6;
  box-shadow: inset 0 0 0 8px #08c1c6;
}

#explain {
  direction: ltr;
}

#explain pre {
  display: inline-block;
  margin: 0;
}

#explain div {
  margin: 2em 0;
}

#explain h5 {
  margin: .5em;
}

#explain label {
  font-size: .8em;
}

#explain label input {
  vertical-align: -10%;
}

#explain label~label input {
  margin-left: 1em;
}

#explain li {
  margin-bottom: 1em;
}

#explain li:first-letter {
  text-transform: capitalize;
}

#button {
  padding: .75em 1.5em;
  background: #08c1c6;
  color: white;
  display: inline-flex;
  border-radius: 5em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75em;
  box-shadow: 0 5px 20px rgba(8, 193, 198, 0.25);
  cursor: pointer;
  margin: 1em;
}

.modal-close {
  padding: .75em 1.5em;
  background: #d95753;
  color: white;
  display: inline-flex;
  border-radius: 5em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75em;
  box-shadow: 0 5px 20px rgba(217, 87, 83, 0.25);
  cursor: pointer;
  margin: 1em;
}

html,
body {
  height: 100%;
}

body {
  font-family: Arial;
  direction: rtl;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="explain">

  <h1>A problem with RTL-directioned body</h1>

  <h4>steps:</h4>
  <ol>
    <li>trigger the modal. nothing seems to be wrong with the checkboxes.</li>
    <li>toggle the scrollbar of the modal (with the radio buttons below). this will make
      <pre>#modal-content</pre> really high.</li>
    <li>trigger the modal. you can now see the V icon is not at its correct position during the transition.
      <li>now apply
        <pre>-webkit-backface-visibility: hidden;</pre> with the second radio button group.</li>
      <li>trigger the modal. you can now see that the checkboxes themselves are offsetted during the transition.</li>
  </ol>

  <hr/>

  <div>
    <h5>toggle the scrollbar of the modal:</h5>
    <label>
        <input type="radio" name="scr" value="true" />apply
      </label>
    <label>
        <input checked="checked" type="radio" name="scr" value="false" />don't apply
      </label>
  </div>

  <div>
    <h5>apply
      <pre>-webkit-backface-visibility: hidden;</pre> on
      <pre>input[type=checkbox]</pre>:</h5>
    <label>
        <input type="radio" name="wbv" value="true" />apply
      </label>
    <label>
        <input checked="checked" type="radio" name="wbv" value="false" />don't apply
      </label>
  </div>

</div>


<div id="button">Trigger Modal</div>


<div id="modal">

  <div class="modal-close">Close Modal</div>

  <div id="modal-content">

    <div id="circle"></div>

    <input type="checkbox"> 1
    <br/>
    <input type="checkbox"> 2
    <br/>
    <input type="checkbox"> 3
    <br/>
    <input type="checkbox" checked="checked"> 4
    <br/>
    <input type="checkbox"> 5
    <br/>
    <input type="checkbox"> 6

  </div>

  <div class="modal-close">Close Modal</div>

</div>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js"></script>

If you know why it happens or how can I fix this, please let me know. Thanks!