title: webvtt position wrong when using css translate on parent (slider)
body: <p>In my project I'm using swiper.js as a slideshow, each slide either contains and image or a html5 video with webvtt captions / subtitles.
  On debugging, we noticed that the subtitle position is wrong (too low, cuts off screen) on webkit browsers.
  After much debugging it turned out that this css3 rule on the parent div (the swiper-wrapper) makes the vtt position wrongly:</p>
  
  <pre><code>transform: translate3d(-1024px, 0px, 0px)
  </code></pre>
  
  <p>When you put the video in the first slide, all goes well, since there's no css translate yet.</p>
  
  <p>This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.</p>
  
  <p>The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:</p>
  
  <pre><code>WEBVTT
  
  00:00:02.160 --&gt; 00:00:06.440 line:90%
  hello world
  
  00:00:06.560 --&gt; 00:00:11.920 line:90%
  testing subtitles
  </code></pre>
  
  <p>Any sentence without the "line: 90%" part is rendered partly offscreen. It seems this setting forces the webvtt parser /  renderer to set itself to the correct position.</p>
  
  <p>QUESTION: did anyone encounter this issue yet and is there any other (easier) workaround for this bug? Adding the "line:" part to all subtitles would be a hell of a job.. unless there's a good editor that can do that stuff in batch.</p>
  
  <p>QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?</p>
  
  <p>Test setup here: <a href="http://orgonemedia.nl/webvtt-bug/" rel="noreferrer">http://orgonemedia.nl/webvtt-bug/</a></p>