summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFlorian Pritz <bluewind@xinu.at>2020-06-12 14:46:21 +0200
committerFlorian Pritz <bluewind@xinu.at>2020-06-12 14:50:30 +0200
commit7ecdbe3d4e84d061289b0ccc8c7faaed1df97f8e (patch)
tree0b0380e145fbf05380d49b613cc4356d1433d2e6
parent1511b0956f4b35eaad7383dbb2d9cfe0592b31ac (diff)
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>
-rw-r--r--NEWS2
-rw-r--r--public_html/data/js/thumbnail-view.js18
2 files changed, 19 insertions, 1 deletions
diff --git a/NEWS b/NEWS
index 05b22512f..dae445a7b 100644
--- a/NEWS
+++ b/NEWS
@@ -1,6 +1,8 @@
This file lists major, incompatible or otherwise important changes, you should look at it after every update.
NEXT
+ - Fix image orientation/rotation when viewing images with the
+ colorbox/lightbox in Firefox 76/Chromium 83.
3.4.4 2020-04-19
- Log PublicApiException to error log
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');
+ }
},
});
},