Hey Fugiman,
Here’s a little more context. I am building a 3D chat room for Twitch.tv streams and the player is mounted on the wall using with CSS transforms. As you move around in the room the transforms change because the player’s perspective changes.
I know this is probably not a high priority use case for Twitch but eh
I updated the demo to use translateZ instead of scale to better illustrate the issue. TranslateZ is moving the element back and fourth in the scene. The element remains 300px by 300px the entire time.
This quote from an MDN article seems relevant:
In case of transforms, the offsetWidth and offsetHeight returns the element’s layout width and height, while getBoundingClientRect() returns the rendering width and height. As an example, if the element has width: 100px; and transform: scale(0.5); the getBoundingClientRect() will return 50 as the width, while offsetWidth will return 100.
My best guess right now is that Safari and Firefox are using offsetWidth and offsetHeight, while Chrome is using the ‘rendering width and height’ from the bounding client rectangle?