webvtt position wrong when using css translate on parent (slider)

Question

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:

transform: translate3d(-1024px, 0px, 0px)

When you put the video in the first slide, all goes well, since there's no css translate yet.

This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.

The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:

WEBVTT

00:00:02.160 --> 00:00:06.440 line:90%
hello world

00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles

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.

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.

QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?

Test setup here: http://orgonemedia.nl/webvtt-bug/

Shaun Shaun · Accepted Answer · 2016-04-06T23:34:20

I'm currently debugging some WebVTT files for English captions and other languages too. I'm experiencing a similar problem, although I can't say what is exactly causing it. I'm going to try the line:90% fix you've suggested here.

ANSWER TO YOUR QUESTION 1: Regarding the job of adding it to all the subtitles, you'll be happy to know that's actually pretty easy with the right tool. I use Sublime Text Editor. The way I would do it is use "Find all" to find all the occurrences of -->, then simultaneously edit each of those lines, using the arrow key to navigate across to the right place on the line (since each subtitle out-time is the same number of characters, 12), then type in line:90%

UPDATE: So I implemented your suggestion, using the method I outlined, and it successfully repositioned my captions.

More details: I was only experiencing the problem of captions being half off the bottom of the video when viewing on an iPad. Oddly enough, viewing the same page on an iPhone, they were positioned correctly without any change. The 90% change still adjusted it up though.

Intriguingly the line:90% code does nothing to adjust caption position when viewing the page on Chrome.

I'm having trouble getting much at all to display on Safari desktop. I think there's something invalid about my file format, but I'm darned if I can find it.

When editing the captions through my video hosting service's caption editor (I'm using JWPlayer), the timecodes show up as being invalid:

Image showing caption editor with invalid warning

webvtt position wrong when using css translate on parent (slider)

1 Answers