HTML5 video subtitles (WebVTT) not showing when video has transform in CSS
Reported by
augustoc...@gmail.com,
Sep 15 2016
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/51.0.2704.79 Chrome/51.0.2704.79 Safari/537.36 Example URL: http://iandevlin.github.io/mdn/video-player-with-captions/ Steps to reproduce the problem: 1. Enter URL http://iandevlin.github.io/mdn/video-player-with-captions/ 2. Activate subtitles (CC button) 3. Add style { transform: translate(-50%, -50%) } to <video> Another way of reproducing it is cloning this repository: 1. git clone https://augustomen@bitbucket.org/augustomen/iandevlin.github.io.git 2. Open page /video-player-with-captions/index.html and activate subtitles. What is the expected behavior? Subtitles should continue being displayed in the correct position. What went wrong? Subtitles are hidden, probably because "translate" transformation didn't apply to them, and they were kept outside the video frame. Did this work before? No Is it a problem with Flash or HTML5? HTML5 Does this work in other browsers? Yes Chrome version: 51.0.2704.79 Channel: stable OS Version: Ubuntu 15.10 Flash Version: Firefox displays the subtitles correctly, and Safari displays them partially cropped (I guess it may depend on the value).
,
Sep 27 2016
Can repro this. Doesn't seem to be caused by subtitles being outside of the video frame as it still happens when the transform is 1px.
,
Sep 27 2016
Suzy can you advise if this behavior is intended?
,
Sep 27 2016
,
Sep 28 2016
Curious, if I turn subtitles on and then add the transform, the subtitles are shown and move with the video. On the other hand, if I add the transform first and then turn subtitles on, the subtitles are hidden, and remain hidden if I remove the transform again. It does look like a bug. I don't think this is an issue with transform or other parts of the animations code, but I'll get a second opinion.
,
Sep 28 2016
The behaviour described in #5 sounds like a bug. Order of activation should not affect outcome. Probably an issue around compositing and subtitles, passing on to the team with a better understanding of the implementation.
,
Sep 28 2016
Fiddle with simplified TC: https://jsfiddle.net/66xL9jvc/
,
Sep 30 2016
,
Sep 30 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/753ec4b0cfb34e187a485c9412ddeaca1604da3a commit 753ec4b0cfb34e187a485c9412ddeaca1604da3a Author: fs <fs@opera.com> Date: Fri Sep 30 09:36:03 2016 Don't use absolute bounding boxes in LayoutVTTCue LayoutVTTCue was using absoluteContentBox()/absoluteBoundingBoxRect() during overlap resolution. This would mean that boxes were computed relative to the containing frame. The former also doesn't take transforms into account, which would mean that the basic overlap check against the title area would fail if a transform was present. Instead compute the various bounding boxes relative to a common ancestor, namely the text track container (which is also the containing block of the cues.) Adjust the controls rect similarly to get it into the same coordinate space. BUG= 647253 Review-Url: https://codereview.chromium.org/2377193003 Cr-Commit-Position: refs/heads/master@{#422072} [add] https://crrev.com/753ec4b0cfb34e187a485c9412ddeaca1604da3a/third_party/WebKit/LayoutTests/media/track/track-cue-rendering-transformed-video-expected.html [add] https://crrev.com/753ec4b0cfb34e187a485c9412ddeaca1604da3a/third_party/WebKit/LayoutTests/media/track/track-cue-rendering-transformed-video.html [modify] https://crrev.com/753ec4b0cfb34e187a485c9412ddeaca1604da3a/third_party/WebKit/Source/core/layout/LayoutVTTCue.cpp [modify] https://crrev.com/753ec4b0cfb34e187a485c9412ddeaca1604da3a/third_party/WebKit/Source/core/layout/LayoutVTTCue.h
,
Sep 30 2016
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by yini...@chromium.org
, Sep 27 2016