1057384 - Dragging and moving a draggable element causes <img> streaming mJPEG show first captured video frame

Status: RESOLVED INCOMPLETE

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Dilshod]

Attachment: test.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

Steps to reproduce:

Steps to reproduce:
1. Download the attached html file
2. Open it in Firefox
3. Remember the first video frame!
4. Drag the red rectangle and move it around, and check if the mjpeg stream is still going on.


Actual results:

The first video frame, which is captured at the moment of opening a live stream page, is shown again when dragging and moving around a <div> element (over <img> which contains mJPEG stream). When I stop moving the element, stream continues playing.

However, when I disable "transform: translate(0px, 0px) translateZ(0px);" css property for the main <div>, it works fine. Even it works fine when I try with <video> element with a source having a 'webm' format.

Something is wrong when I use css 'transform' property (happens only for mJPEG format). Please check the code in the attached file.


Expected results:

Dragging and moving any draggable html element should not cause the stream stop.

Comment 1

[Loic]

Attachment: 1057384.html

I changed your testcase for a mjpeg stream with a timestamp, so it's more easy to know if the stream is static or playing.

Comment 2

[Loic]

Issue pretty similar to bug 1055977 with CSS transform and fullscreen.

Comment 3

[Loic]

I should have tested in Nightly, because I'm not able to reproduce the issue in FF34.
Working range:
bad=2014-07-23
good=2014-07-24
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=82df3654cd80&tochange=a91ec42d6a9c

FF31:
mjpeg stream stays paused (start frame) when the page is loaded
moving the red rectangle keeps it paused
dropping the rectangle makes the stream playing

FF34:
mjpeg stream starts immediately when the page has finished to load
moving/dropping the red rectangle doesn't stop the stream anymore

Reporter, can you install Nightly (https://nightly.mozilla.org/) and confirm it's fixed on your side, please.

Comment 4

[Daniel Holbert [:dholbert]]

(Not related to bug 1055977; that bug is fullscreen-specific.) Glad to hear it's likely fixed, though!

Comment 5

[Dilshod]

I tested in Nightly, and it works fine for the attached test case.

However, it is still reproducible in Nightly when I try with my local code, where I use ISCROLL 5 (http://cubiq.org/iscroll-5) to generate e.g. 'transform: translate(1px, -8px) translateZ(0px);' for the '<div class="video-wrap">'. When I disable this property (using inspector), it works fine. Note that x and y values in 'translate' are set dynamically whenever I drag and move the draggable object.

And also, in my local code the image offset is hidden and the '<img>' becomes draggable when its size is bigger than the browser window. So when I drag and move the image element, the stream is paused and the first captured frame is shown again.

Comment 6

[Loic]

Could you provide a public testcase with your local code?
If yes, open a new bug about this remaining issue and attach the new testcase.

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

A needinfo is requested from the reporter, however, the reporter is inactive on Bugzilla. Closing the bug as incomplete.

For more information, please visit BugBot documentation.