Update CSS for mirroring local video

[timmydoza]

This helps to workaround a Safari CSS issue related to transforms

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

• VIDEO-9871

Description

This PR changes the way that the local video track is mirrored. This change is made to help an issue that is experienced in Desktop Safari where the local video track sometimes appears to be black.

This changes the CSS:
transform: rotateY(180deg)
Which computes to (as seen in the 'Computed' tab in DevTools):
transform: matrix3d(-1, 0, -1.2246467991473532e-16, 0, 0, 1, 0, 0, 1.2246467991473532e-16, 0, -1, 0, 0, 0, 0, 1);

to:
transform: scaleX(-1)
Which computes to:
matrix(-1, 0, 0, 1, 0, 0)

I'm not exactly sure why this workaround helps, but it may have something to do with the fact that scaleX(-1) results in a simpler 2d transformation, instead of the more complicated 3d transform that results from rotateY(180deg). I'm guessing that Safari has an easier time with the simple 2d transform.

Burndown

Before review

• Updated CHANGELOG.md if necessary
• Added unit tests if necessary
• Updated affected documentation
• Verified locally with npm test
• Manually sanity tested running locally
• Included screenshot as PR comment (if needed)
• Ready for review

Before merge

• Got one or more +1s
• Re-tested if necessary