893497 - A skewed/rotated HTML 5 Video with rounded corner are incorrectly clipped

Status: RESOLVED INVALID

(Core :: Graphics: Layers, defect)

Description

[Lie Ryan]

Attachment: demo.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130627161625

Steps to reproduce:

Open the attached demo page on Firefox for Android, which contain a minimal test case of the issue. 

In the page is a <video> with two CSS properties: 

1. rotation (transform: rotate(30deg);) 
2. rounded corner (border-radius: 30%;)

According to my testing:

- only affects <video> tags, using <img> tag does NOT trigger the bug. 
- both properties must exist together, using video+rotation and video+border-radius does NOT trigger the bug
- only matrix(), skew(), rotate(), and rotateZ() triggers the bug, the other rotation axis (i.e. rotateX, rotateY) does NOT trigger the bug and other transform properties does not trigger the bug

Device: 
- Galaxy Nexus with Android 4.1.2

Affected Version:
- Firefox for Android Beta (23.0)
- Firefox for Android Nightly (25.0a1 - 2013-07-13)

Note: The stable Firefox for Android had another unrelated issues that are fixed in Beta


Actual results:

Rotation and skewed are applied (correctly), but the video is translated about half the height of the video and incorrectly clipped.


Expected results:

Video should be rotated with rounded corner, but not translated or clipped. Check the page on desktop Firefox for what it should look like.

Comment 1

[Lie Ryan]

This seems to have been fixed in the current stable Firefox (and possibly even earlier).