Позиция webvtt неверна при использовании css translate on parent (slider)

Question

В моем проекте я использую swiper.js в качестве слайд-шоу, каждый слайд содержит или изображение или видео html5 с субтитрами/субтитрами webvtt. При отладке мы заметили, что позиция субтитров неверна (слишком низкая, отсекает экран) в браузерах webkit. После долгих отладки оказалось, что это правило css3 на родительский DIV (Swiper-обертку) делает позицию VTT неправильно:

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

Когда вы кладете видео в первом слайде, все идет хорошо, так как есть no css перевод еще нет.

Это, по-видимому, проблема с основным веб-сайтом: по умолчанию webvtt позиционирует разрывы при использовании перевода css на родителя.

Обходной я нашел, чтобы добавить позиционирование линии в самой VTT к каждому элементу субтитров, например, так:

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 

Любое предложение без «линии: 90%» часть оказывается частично закадровый. Кажется, этот параметр заставляет анализатор/рендеринга webvtt установить правильное положение.

ВОПРОС: Кто-нибудь сталкивался с этой проблемой еще и есть ли какое-либо другое (более легкое) обходное решение для этой ошибки? Добавление части «line:» ко всем субтитрам было бы настоящей работой. Если не существует хорошего редактора, который может делать это в пакетном режиме.

ВОПРОС 2: Поскольку это, похоже, ошибка веб-сайта vtt parser, кто-нибудь знает, где лучше всего сообщить об этом?

Испытательная установка здесь: http://orgonemedia.nl/webvtt-bug/

Answer 1

Я в настоящее время отладки некоторые файлы WebVTT для английских заголовков и других языков тоже. У меня такая же проблема, хотя я не могу сказать, что именно вызывает ее. Я собираюсь попробовать линию: исправление 90%, которое вы предложили здесь.

ОТВЕТ НА ВАШ ВОПРОС 1: Что касается задания по добавлению его ко всем субтитрам, вы будете рады узнать, что на самом деле это довольно легко с помощью правильного инструмента. Я использую Sublime Text Editor. То, как я это сделаю, это использовать «Найти все», чтобы найти все вхождения ->, затем одновременно отредактировать каждую из этих строк, используя клавишу со стрелкой, чтобы переместиться в нужное место на линии (так как каждый вывод субтитров - время - это то же количество символов, 12), затем введите строку: 90%

ОБНОВЛЕНИЕ: Итак, я применил ваше предложение, используя метод, который я начертил, и он успешно переместил мои подписи.

Подробнее: У меня возникла проблема с титрами, находящимися на половину от нижней части видео при просмотре на iPad. Как ни странно, просматривая одну и ту же страницу на iPhone, они правильно позиционировались без каких-либо изменений. Тем не менее, 90% -ное изменение все равно изменило его.

Интригующе строка: 90% -ый код ничего не помогает настроить заголовок при просмотре страницы на Chrome.

У меня возникли проблемы с отображением на рабочем столе Safari. Я думаю, что есть что-то недействительное в отношении моего формата файла, но я чертовски, если я могу его найти.

При редактировании подписи через мое видео хостинг редактор титров сервиса (я использую JWPlayer), то временные коды отображаются как недопустимый:

Image showing caption editor with invalid warning