From 7ecdbe3d4e84d061289b0ccc8c7faaed1df97f8e Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Fri, 12 Jun 2020 14:46:21 +0200 Subject: 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 --- public_html/data/js/thumbnail-view.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'public_html') 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 = $(''); + $('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: '', loop: false, orientation: function() { - return $(this).data('orientation'); + if (browserHandlesImageOrientation) { + return 1; + } else { + return $(this).data('orientation'); + } }, }); }, -- cgit v1.2.3-24-g4f1b