在我的项目中，我使用 swiper.js 作为幻灯片，每张幻灯片都包含图像或带有 webvtt 字幕/副标题的 html5 视频。在调试时，我们注意到 webkit 浏览器上的字幕位置错误（太低，截断屏幕）。经过多次调试，发现父 div（swiper-wrapper）上的这个 css3 规则使 vtt 位置错误：
transform: translate3d(-1024px, 0px, 0px)
当您将视频放入第一张幻灯片时，一切都很顺利，因为还没有 css 翻译。
这似乎是一个核心 webkit 问题：在父级上使用 css 翻译时，默认 webvtt 定位会中断。
我发现的解决方法是将 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
任何没有“line: 90%”部分的句子都会部分渲染到屏幕外。看来这个设置强制 webvtt 解析器/渲染器将自身设置到正确的位置。
问题：有人遇到过这个问题吗？对于这个错误还有其他（更简单的）解决方法吗？将“line:”部分添加到所有字幕中将是一项艰巨的工作..除非有一个好的编辑器可以批量完成这些工作。
问题 2：由于这似乎是一个 webkit vtt 解析器错误，有人知道在哪里可以最好地报告这个问题吗？
此处测试设置： http: //orgonemedia.nl/webvtt-bug/