title: transform scale works incorrectly for odd pixel widths
body: <p>I am trying to scale a div, but keep the inside element at <strong>the same position</strong> and <strong>the same size</strong>. To do that, I use <code>transform: scale(value)</code> on wrapper and <code>transform: scale(1/value)</code> on the inside div.</p>
  
  <p>The problem is, that the inside div shifts when I change scale. That only happens if width/height of wrapper is odd or not whole. It does not happen for even widths/height of the wrapper.</p>
  
  <p>My goal is to have many child elements of wrapper that scale alongside wrapper, but only one that does not.</p>
  
  <p>Take a look at this example to see problem in action (hover to scale).</p>
  
  <p>Example with <strong>no issue</strong>, inner element stay fixed on scale (height and width of container are even):</p>
  
  <p><a href="https://jsfiddle.net/o16rau6u/5/" rel="noreferrer">https://jsfiddle.net/o16rau6u/5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
  }
  
  .bg {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .wrapper:hover {
    transform: scale(2);
  }
  
  .wrapper:hover .bg {
    transform: scale(0.5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper" class="wrapper"&gt;
    &lt;div id="bg" class="bg"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example with <strong>issue</strong>, the inner element move a little on scale (height and width of container are odd):</p>
  
  <p><a href="https://jsfiddle.net/o16rau6u/6/" rel="noreferrer">https://jsfiddle.net/o16rau6u/6/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 201px;
    height: 201px;
    background-color: blue;
    position: relative;
  }
  
  .bg {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .wrapper:hover {
    transform: scale(2);
  }
  
  .wrapper:hover .bg {
    transform: scale(0.5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper" class="wrapper"&gt;
    &lt;div id="bg" class="bg"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I fix this issue and avoid my elements to move on scale whataver the size of container is ?</p>
  
  <p><strong><em>PS :</strong> The example used above is a very simplified example to show the issue and it's not the needed output or the code used. So we are not looking for another way to achieve the same behavior above as it's pretty easy to be done</em>.</p>