Estoy tratando de escalar un div, pero mantengo el elemento interno enla misma posición yel mismo tamaño. Para hacer eso, yo usotransform: scale(value) en envoltura ytransform: scale(1/value) en el interior div.

El problema es que el div interno cambia cuando cambio la escala. Eso solo sucede si el ancho / alto del envoltorio es impar o no completo. No sucede incluso para anchos / alturas del envoltorio.

Mi objetivo es tener muchos elementos secundarios del contenedor que se escalen junto con el contenedor, pero solo uno que no lo haga.

Eche un vistazo a este ejemplo para ver el problema en acción (pase el mouse por la escala).

Ejemplo consin problema, el elemento interno permanece fijo en la escala (la altura y el ancho del contenedor son pares):

https://jsfiddle.net/o16rau6u/5/

.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);
}

<div id="wrapper" class="wrapper">
  <div id="bg" class="bg"></div>
</div>

Ejemplo conproblema, el elemento interno se mueve un poco en la escala (la altura y el ancho del contenedor son impares):

https://jsfiddle.net/o16rau6u/6/

.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);
}

<div id="wrapper" class="wrapper">
  <div id="bg" class="bg"></div>
</div>

¿Cómo puedo solucionar este problema y evitar que mis elementos se muevan a escala del tamaño del contenedor?

PD: El ejemplo utilizado anteriormente es un ejemplo muy simplificado para mostrar el problema y no es la salida necesaria o el código utilizado. Por lo tanto, no estamos buscando otra forma de lograr el mismo comportamiento anterior, ya que es bastante fácil de hacer.