在父级上使用css翻译时，webvtt位置错误(滑块)

Question

在我的项目中，我使用swiper.js作为幻灯片，每张幻灯片要么包含图片，要么包含带有webvtt字幕/字幕的html5视频。在调试时，我们注意到webkit浏览器上的字幕位置错误(太低，切断屏幕)。经过多次调试，结果证明父div (卷帘包装器)上的这条css3规则使vtt位置错误：

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

当你将视频放到第一张幻灯片中时，一切都很顺利，因为还没有css翻译。

这似乎是webkit的一个核心问题:在家长上使用css翻译时，默认的webvtt定位中断。

我发现的解决办法是在vtt本身中为每个subtitle元素添加一个行位置，如下所示：

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

任何没有"line: 90%“部分的句子都会部分显示在屏幕之外。这个设置似乎强制webvtt解析器/渲染器将自己设置到正确的位置。

问:有没有人遇到过这个问题，有没有其他(更容易的)解决这个bug的方法？在所有字幕中添加"line:“部分将是一项地狱般的工作..除非有一个好的编辑器可以批量处理这些东西。

问题2:由于这似乎是一个webkit vtt解析器错误，有人知道在哪里报告这个问题最好吗？

测试设置在这里：http://orgonemedia.nl/webvtt-bug/

Answer 1

我目前正在调试一些英文字幕和其他语言的WebVTT文件。我也遇到了类似的问题，尽管我不能确切地说是什么导致了它。我将尝试您在这里建议的90%修复。

回答你的问题1:关于将它添加到所有字幕的工作，你会很高兴地知道，使用正确的工具，这实际上是相当容易的。我使用Sublime Text Editor。我的方法是使用"Find all“查找-->的所有匹配项，然后同时编辑这些行中的每一行，使用箭头键导航到该行上的正确位置(因为每个副标题超时都是相同的字符数，12)，然后键入行:90%

更新:因此，我使用我概述的方法实现了您的建议，并成功地重新定位了我的标题。

更多细节:当我在iPad上观看时，我只遇到了字幕在视频底部的一半的问题。奇怪的是，在iPhone上查看相同的页面时，它们的位置是正确的，没有任何变化。然而，90%的变化仍然调整了它。

有趣的是，在Chrome上查看页面时，90%的代码不会调整标题位置。

我很难在Safari桌面上显示很多东西。我想我的文件格式有些地方不对劲，但如果我能找到的话我就完了。

当通过我的视频托管服务的字幕编辑器(我使用的是JWPlayer)编辑字幕时，时间码显示为无效：

Image showing caption editor with invalid warning