thumbnail-view.js: Detect automatic image rotation in recent browsers

The default value has been changed to `from-image` and at least with
Firefox 76 and Chromium 83 this leads to double rotated images.
Disabling the automatic rotation with `image-orientation: none` in CSS
leads to incorrectly scaled images, (likely, but unverified) because the
width/height are returned incorrectly/rotated in jquery/javascript.
Whatever it may be, the easier fix is to just check for the new default
value and if the browser handles orientation automatically, we disable
our own code.

https://github.com/w3c/csswg-drafts/issues/3799

Signed-off-by: Florian Pritz <bluewind@xinu.at>

1 files changed, 17 insertions, 1 deletions

diff --git a/public_html/data/js/thumbnail-view.js b/public_html/data/js/thumbnail-view.js
index dc2f547ab..eb9ee33ce 100644
--- a/public_html/data/js/thumbnail-view.js
+++ b/public_html/data/js/thumbnail-view.js
@@ -20,7 +20,19 @@ define(['jquery', 'underscore', 'multipaste', 'jquery.colorbox'], function ($, _
 			$(window).resize(_.bind(this.onResize, this));
 		},
 
+		browserHandlesImageOrientation: function () {
+			var testImg = $('<img>');
+			$('body').append(testImg);
+			var style = window.getComputedStyle(testImg.get(0));
+			var result = style.getPropertyValue('image-orientation')
+			console.log('Browser default image-orientation: ', result)
+			testImg.remove();
+			return result == 'from-image';
+		},
+
 		setupColorbox: function () {
+			var browserHandlesImageOrientation = PrivateFunctions.browserHandlesImageOrientation();
+
 			$(ui.colorbox).colorbox({
 				transistion: "none",
 				speed: 0,
@@ -36,7 +48,11 @@ define(['jquery', 'underscore', 'multipaste', 'jquery.colorbox'], function ($, _
 				close: '<span class="glyphicon glyphicon-remove"></span>',
 				loop: false,
 				orientation: function() {
-					return $(this).data('orientation');
+					if (browserHandlesImageOrientation) {
+						return 1;
+					} else {
+						return $(this).data('orientation');
+					}
 				},
 			});
 		},