mat*_*yin 5 webkit css-transforms webvtt swiper.js
在我的项目中，我使用 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/
小智 -1
我目前正在调试一些英语字幕和其他语言的 WebVTT 文件。我也遇到了类似的问题，虽然我不能说到底是什么原因造成的。我将尝试您在这里建议的行：90% 修复。
问题 1 的回答：关于将其添加到所有字幕的工作，您会很高兴知道使用正确的工具实际上非常容易。我使用 Sublime Text 编辑器。我的方法是使用“查找全部”来查找所有出现的 -->，然后同时编辑每一行，使用箭头键导航到该行的正确位置（因为每个字幕都出- time 是相同的字符数，12)，然后输入 line:90%
更新：所以我使用我概述的方法实施了您的建议，并且它成功地重新定位了我的标题。
更多细节：我只是在 iPad 上观看时遇到了字幕位于视频底部一半的问题。奇怪的是，在 iPhone 上查看同一页面时，它们的位置正确，没有任何变化。不过，90% 的变化仍然对其进行了调整。
有趣的是，在 Chrome 上查看页面时，90% 代码行没有执行任何调整标题位置的操作。
我无法在 Safari 桌面上显示太多内容。我认为我的文件格式有些无效，但如果我能找到它，我就该死了。
通过我的视频托管服务的字幕编辑器（我使用的是 JWPlayer）编辑字幕时，时间码显示为无效：
