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
<rdar://problem/37516619>
In my real app, the `transform` style isn't applied to the <audio> tag itself, but instead to one of its ancestors. However, I created a simplified example here which applies the `transform` style to the <audio> tag itself. The layout problem is the same in both cases. Just wanted to mention that, in case anything turns on exactly which node gets the `transform` style.
It is still reproducible in Safari 17.2.1. Adding 'BrowserCompat' tag. https://jsfiddle.net/bxkq1fym/1/show