Chrome >= 81 auto-rotates images base on EXIF orientation causing double-correction

[BenSturmfels]

I've hit an issue where a portrait image (EXIF orientation 6) is over-rotated by 90 degrees clockwise when uploaded to Shareabouts.

EXIF orientations:
https://www.impulseadventure.com/photo/exif-orientation.html

Currently Shareabouts loads images into a canvas element in JavaScript and resizes and corrects their orientation based on the EXIF data. Unfortunately, it appears that Chrome 81 (April 2020) has been updated to perform this re-orientation automatically, resulting in a double correction. The problem is that this behaviour is different to previous version of Chrome and to other browsers like Firefox.

https://bugs.chromium.org/p/chromium/issues/detail?id=158753#c104

I don't yet have a clear plan in mind to reliably work around this. It's not really Shareabouts' fault, but I wanted to raise it in case others were seeing this confusing behaviour.

[BenSturmfels]

I've done some further testing on this. I not 100% confident on all these results as it required a bit of collaboration.

1. Windows 10 Edge - over rotated
2. Windows 10 Chrome - over rotated
3. Windows 10 Firefox - over rotated
4. iPhone 7, iOS 12.4.1, Chrome - normal
5. iPhone 7, iOS 12.4.1, Safari - normal
6. iPhone X, Chrome - over rotated
7. iPhone X, Safari - over rotated
8. Galaxy S5 stock browser - normal
9. Galaxy S5 Chrome - over rotated
10. Guix System (GNU/Linux) IceCat (Firefox) - normal
11. Guix System Chromium - over rotated

I should have mentioned earlier, but this is a 6 year-old Shareabouts codebase that I'm testing on, though comparing with current, I don't think the relevant JavaScript has changed significantly src/sa_web/static/js/utils.js functions fileToCanvas(), and fixImageOrientation.

Given that more of the browsers in the test seem to be overrotating than not, the workaround I'm currently using is to disable the Shareabouts fixImageOrientation:

diff --git a/src/sa_web/static/js/utils.js b/src/sa_web/static/js/utils.js
index b432d131..968083ea 100644
--- a/src/sa_web/static/js/utils.js
+++ b/src/sa_web/static/js/utils.js
@@ -250,8 +250,8 @@ var Shareabouts = Shareabouts || {};
 
           loadImage(file, function(canvas) {
             // rotate the image, if needed
-            var rotated = S.Util.fixImageOrientation(canvas, orientation);
-            callback(rotated);
+            //var rotated = S.Util.fixImageOrientation(canvas, orientation);
+            callback(canvas);
           }, options);
       };

[BenSturmfels]

Looks like there were some problems with my testing above and we weren't seeing the up-to-date JavaScript on iOS. Chrome on iOS does not over-rotate because it uses the Webkit renderer, not Blink.

In simpler terms, it appears that any browser that's using the Blink rendering engine is over-rotating. This includes Chrome everywhere except iOS where it uses Webkit), Microsoft Edge, Brave etc. Non-Blink browsers behave normally, eg. Firefox, stock Android browsers.

[mjumbewu]

I'm curious what the state of this is with the most recent browsers. Since most browsers are probably over-rotating (as you pointed out above) I'm inclined to "fix" it.

[BenSturmfels]

@mjumbewu I just tested on Edge 115 and Chrome 116 on Windows and these are still over-rotating. Here's my sample image for reference.