title: transform: scale elements within transformed container are not positioned correctly
body: <p>I have just noticed a weird bug I could replicate  on <a href="https://jsfiddle.net/xLjhdr1k/11/embedded/result" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>I use a custom design for checkboxes, and my V icon is being animated from <code>transform: scale(0)</code> to <code>transform: scale(1)</code> on click. Nothing too crazy.</p>
  
  <p>The problem starts when I place a checkbox within another element with 
  a <code>transform</code> property. I use iziModal library in my example to demonstrate it.</p>
  
  <p>Open the results page on full screen and try following these steps in order to see the exact issue:</p>
  
  <ol>
  <li><strong>Trigger the modal.</strong> nothing seems to be wrong with the checkboxes.</li>
  <li>Toggle the scrollbar of the modal (with the radio buttons below). this will make <code>#modal-content</code> really high.</li>
  <li><strong>Trigger the modal.</strong> you can now see the V icon is not at its correct position during the transition.</li>
  <li>Now apply <code>-webkit-backface-visibility: hidden;</code> with the second radio button group.</li>
  <li><strong>Trigger the modal.</strong> you can now see that the checkboxes themselves are offsetted during the transition.</li>
  </ol>
  
  <p><strong>Notes:</strong></p>
  
  <ul>
  <li><code>-webkit-backface-visibility: hidden;</code> on other elements than <code>input[type=checkbox]</code> doesn't seem to change anything.</li>
  <li>the problem happens only when <code>body</code> is <code>direction: rtl;</code>.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
    });
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="explain"&gt;
  
    &lt;h1&gt;A problem with RTL-directioned body&lt;/h1&gt;
  
    &lt;h4&gt;steps:&lt;/h4&gt;
    &lt;ol&gt;
      &lt;li&gt;trigger the modal. nothing seems to be wrong with the checkboxes.&lt;/li&gt;
      &lt;li&gt;toggle the scrollbar of the modal (with the radio buttons below). this will make
        &lt;pre&gt;#modal-content&lt;/pre&gt; really high.&lt;/li&gt;
      &lt;li&gt;trigger the modal. you can now see the V icon is not at its correct position during the transition.
        &lt;li&gt;now apply
          &lt;pre&gt;-webkit-backface-visibility: hidden;&lt;/pre&gt; with the second radio button group.&lt;/li&gt;
        &lt;li&gt;trigger the modal. you can now see that the checkboxes themselves are offsetted during the transition.&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;hr/&gt;
  
    &lt;div&gt;
      &lt;h5&gt;toggle the scrollbar of the modal:&lt;/h5&gt;
      &lt;label&gt;
          &lt;input type="radio" name="scr" value="true" /&gt;apply
        &lt;/label&gt;
      &lt;label&gt;
          &lt;input checked="checked" type="radio" name="scr" value="false" /&gt;don't apply
        &lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;h5&gt;apply
        &lt;pre&gt;-webkit-backface-visibility: hidden;&lt;/pre&gt; on
        &lt;pre&gt;input[type=checkbox]&lt;/pre&gt;:&lt;/h5&gt;
      &lt;label&gt;
          &lt;input type="radio" name="wbv" value="true" /&gt;apply
        &lt;/label&gt;
      &lt;label&gt;
          &lt;input checked="checked" type="radio" name="wbv" value="false" /&gt;don't apply
        &lt;/label&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="button"&gt;Trigger Modal&lt;/div&gt;
  
  
  &lt;div id="modal"&gt;
  
    &lt;div class="modal-close"&gt;Close Modal&lt;/div&gt;
  
    &lt;div id="modal-content"&gt;
  
      &lt;div id="circle"&gt;&lt;/div&gt;
  
      &lt;input type="checkbox"&gt; 1
      &lt;br/&gt;
      &lt;input type="checkbox"&gt; 2
      &lt;br/&gt;
      &lt;input type="checkbox"&gt; 3
      &lt;br/&gt;
      &lt;input type="checkbox" checked="checked"&gt; 4
      &lt;br/&gt;
      &lt;input type="checkbox"&gt; 5
      &lt;br/&gt;
      &lt;input type="checkbox"&gt; 6
  
    &lt;/div&gt;
  
    &lt;div class="modal-close"&gt;Close Modal&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you know why it happens or how can I fix this, please let me know. Thanks!</p>