diff options
| author | Florian Pritz <bluewind@xinu.at> | 2020-06-12 14:46:21 +0200 |
|---|---|---|
| committer | Florian Pritz <bluewind@xinu.at> | 2020-06-12 14:50:30 +0200 |
| commit | 7ecdbe3d4e84d061289b0ccc8c7faaed1df97f8e (patch) | |
| tree | 0b0380e145fbf05380d49b613cc4356d1433d2e6 | |
| parent | 1511b0956f4b35eaad7383dbb2d9cfe0592b31ac (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-- | NEWS | 2 | ||||
| -rw-r--r-- | public_html/data/js/thumbnail-view.js | 18 |
2 files changed, 19 insertions, 1 deletions
@@ -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'); + } }, }); }, |