[Webkit-unassigned] [Bug 182745] New: <audio> and <video> controls render strangely when rotated

Tue Feb 13 14:02:03 PST 2018

https://bugs.webkit.org/show_bug.cgi?id=182745

            Bug ID: 182745
           Summary: <audio> and <video> controls render strangely when
                    rotated
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: rgrempel at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

In Safari 11, and WebKit nightly r228428, it appears that the <audio> and <video> tags render their controls in an oddly offset position if a CSS rotation has been applied. Here's an example document HTML document:

<html>
    <head></head>
    <body>
        <div style="margin-left: 200px; margin-top: 20px">
            <div style="transform: rotate(45deg); transform-origin: top left; background-color: blue; height: 30px; width: 30px;"></div>
        </div>
        <div style="margin-left: 200px; margin-top: 50px">
            <audio controls="true" style="transform: rotate(45deg); transform-origin: top left; background-color: red;" />
        </div>
        <div style="margin-left: 200px; margin-top: 300px">
            <video controls="true" style="transform: rotate(45deg); transform-origin: top left; background-color: green;" />
        </div>
    </body>
</html>

I've made a jsfiddle here: https://jsfiddle.net/bxkq1fym/1/

If I view this in Chrome vs. WebKit, the placement of the background-color agrees. However, in WebKit, the controls for <audio> and <video> are strangely offset, depending on the angle of rotation. 

Here's how it looks -- what I would expect to see is that the audio control is located with the red background ... in fact, you shouldn't even see the red background, as the audio control should be on top of it:

https://drive.google.com/file/d/1zODqtwuhl905gltZpiK4_MpZizIewWe3/view

Here's how it looks in Chrome (and how I would expect it to look):

https://drive.google.com/file/d/1oEGOlfJY0xdMg3-3DJpfX6mW2eJ8qSth/view

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180213/53b57fc8/attachment-0001.html>