How to detect handling of image rotation by the browser engine version - cross-browser

Question

I need to properly display an image depending on it exif image orientation tag.
I adjusted the rotation and flipping of the image for each case in the 8 possible image orientation options (described here)
I tested on the images in here
In Chrome (version 81.0) on Ubuntu 18.04, all image options display properly.
On MacOS and iOS I get different behaviors. Sometimes the images are not displayed properly
I read here that the behavior may change depending on the version of the webkit browser engine.
I want to adjust the code to each use case:
browser (e.g. Chrome, Firefox, Safari)
engine version (e.g. webkit version < 13.4, webkit version >= 13.4, etc...)
I read here and here that detecting the user agent is usually a bad idea, and that it is better to detect the existence of the feature
In my case, the feature exists in the different versions but the behavior of the agent is different between versions? (I think)
What would be the best way to detect the handling of image orientation (handling of exif imageOrientation tag)
Thanks,
Avner

Answer 1

That is cased because the default value of image-orientation has been changed in the recent versions of browsers.
From Chrome 81, the default value is from-image. https://chromestatus.com/feature/6313474512650240
In iOS, I observed that the value is from-image from iOS 13.4.
And I use the following code to detect the default value.
const getImageOrientation = (): string => {
const img = document.createElement('img');
img.style.display = 'none';
document.body.appendChild(img);
const imageOrientation = window.getComputedStyle(img).imageOrientation;
document.body.removeChild(img);
return imageOrientation;
};
if (getImageOrientation() !== 'from-image') {
// rotate image
}