title: Different spacing character and word spacing depending on browser
body: <p>I have a problem with epubs (xhtml files) generated by InDesign epub export. They look OK in Firefox, but not in Chrome nor in MAC epub reader. 
  In Chrome and epub reader, the spacing between some of the words is either increased or decreased compared to the same xhtml viewed in Firefox.</p>
  
  <p>Consider the following div</p>
  
  <pre><code> &lt;div id="_idContainer039" class="Basic-Text-Frame"&gt;
    &lt;div style="width:5270.4px;height:2592px;position:absolute;top:0px;left:0px;-webkit-transform-origin: 0% 0%; -webkit-transform: translate(0px,5.12px) rotate(0deg) scale(0.05);transform-origin: 0% 0%; transform: translate(0px,5.12px) rotate(0deg) scale(0.05);"&gt;
      &lt;p class="body-text-25pt-no-indent ParaOverride-1"&gt;
        &lt;span id="w79" class="CharOverride-17" style="position:absolute;top:1181px;left:1514.4px;letter-spacing:-6.17px;"&gt;für &lt;/span&gt;
        &lt;span id="w80" class="CharOverride-17" style="position:absolute;top:1181px;left:2029.29px;letter-spacing:2.34px;"&gt;Sofias &lt;/span&gt;
        &lt;span id="w81" class="CharOverride-17" style="position:absolute;top:1181px;left:2982.32px;letter-spacing:-17.54px;"&gt;Vater,&lt;/span&gt;
        &lt;span id="w82" class="CharOverride-18" style="position:absolute;top:1678.86px;left:549.45px;letter-spacing:4.63px;"&gt;Blumen&lt;/span&gt;
        &lt;span id="w83" class="CharOverride-17" style="position:absolute;top:1821px;left:2288.22px;letter-spacing:-6.17px;"&gt;für &lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and then the styles for it:</p>
  
  <pre><code>div.Basic-Text-Frame {
  border-style:solid;
  }
  
  #_idContainer039 {
  -webkit-transform:translate(21.600px,114.396px) rotate(0.000deg) skew(0.000deg) scale(1.000,1.000);
  -webkit-transform-origin:0% 0%;
  height:135.72px;
  left:0px;
  position:absolute;
  top:0px;
  transform:translate(21.600px,114.396px) rotate(0.000deg) skew(0.000deg) scale(1.000,1.000);
  transform-origin:0% 0%;
  width:263.52px;
  }
  
  
  span.CharOverride-17 {
  color:#000000;
  font-family:"TypographyofCoop-Forged", sans-serif;
  font-size:380px;
  font-style:normal;
  font-weight:normal;
  }
  
  span.CharOverride-18 {
  color:#a82478;
  font-family:"Girard Sansusie", sans-serif;
  font-size:540px;
  font-style:normal;
  font-weight:600;
  }
  </code></pre>
  
  <p>I suppose it's something depending on -webkit-transform, but I don't know what. I need my files to be compatible with Chrome (and therefore, supposedly MAC as well). I am using latest Chrome, 47.0.2526.80 m.</p>
  
  <p>Should I do some other transformations for this?</p>
  
  <p>This is how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/Vn6b8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vn6b8.png" alt="Preview"></a></p>
  
  <p>Thanks for the info!</p>