Categories
Uncategorized

image-orientation CSS property

The other day I was investigating an issue with Chrome 83 and a MJPEG stream embedded in an <img />

The MJPEG stream was streaming an iPhone screen to the end user. When the user decided to rotate the screen (switching between portrait and landscape), the MJPEG stream was updated accordingly when viewing the stream inside a separate tab, but it was not showing correctly when embedded in a HTML image tag.

Turns out that since Chrome 81, the browser will look at the EXIF data to decide the correct orientation. The issue I was experiencing was happening because the EXIF data did not update after each rotation.

The solution was to use image-orientation and apply this CSS rule to the image tag. Once that was in place, the MJPEG stream was showing correctly after each rotation.

More information is available in this Chromium ticket.