1

Ситуация следующая. Верстаю страницу, которая должна одинаково работать в браузерах IE 11, Edge, Google Chrome и Firefox.
Страница разделена на несколько блоков. Одну часть занимает блок, в который загружается изображение. Все изображения, которые будут загружаться, прямоугольные и разного размера. По умолчанию размер изображения подгоняется под 100% ширины блока.
Основной функционал, который доступен пользователю при работе с изображением следующий: поворачивать его на 90, 180, 270 и 360 градусов, пропорционально увеличивать и уменьшать масштаб на 5% от текущего значения. Если изображение не помещается в блок, то появляется скролл, позволяющий пользователю просмотреть всё изображение.
Всё отлично работает, кроме поворота изображения на 90 и 270 градусов в браузерах IE 11 и Edge.
Пример проблемы:

.image-wrapper {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  width: 50%;
  height: 55%;
  overflow: auto;
  display: block;
}

#Left {
  position: relative;
  display: block;
}

#ImageLeft {
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  display: block;
  top: 0px;
  bottom: 0px;
  position: absolute;
  width: 100%;
}
<div class="image-wrapper">
  <div id="Left" class="rotate0">
      <img id="ImageLeft" src="https://cdn.tutsplus.com/vector/uploads/legacy/qt/qt_35_isometric_grid/2.jpg">
    </div>
</div>

Если опустить вертикальный скролл до самого низа, то в IE 11 и Edge будет лишнее пустое пространство между изображением и концом блока. Его не должно быть и его нет в Google Chrome и Firefox!
Создается ощущение, что IE 11 и Edge не до конца понимает, что изображение повернуто.
В последние 2 недели упорно гуглил данную проблему, но работающего для себя решения так и не нашел. Людям помогает display: block или связка position: relative на родительском элементе + position: absolute на проблемном, указание top, left, right, bottom, различных margin, и даже DOCTYPE. Но мне ничего не помогает... :(
Как всё-таки избавиться от лишнего пустого пространства, после поворота на 90 или 270 градусов, в IE 11 и Edge?
Я только начинаю осваивать верстку HTML, поэтому прошу камнями не закидывать, если проблема банальна.

3
  • У меня в последней версии Edge все работает... Что касается IE, то мне кажется, что у него баг с обновлением scrollHeight. Вообще на IE в 2020-ом можно потихоньку забивать, его мировая доля около 1% и она постоянно снижается.
    – NoSkill
    5 сен 2020 в 5:31
  • Подскажите, пожалуйста, версию Edge, на которой проблема не проявляется. Возможно удастся пробить установку обновлений для Win10 в нашей организации, т.к. последние крупное обновление 2004 до сих пор не установлено точно. И т.к. в нашей организации используется внутреннее ПО, которое работает только на IE, то, к сожалению, я не могу "забить" на поддержку этого древнего браузера... (((
    – Mik
    5 сен 2020 в 13:15
  • Microsoft Edge Version 85.0.564.44 (Official build) (64-bit). Ниже предложу ответ - вариант, который стоит попробовать...
    – NoSkill
    5 сен 2020 в 17:03

2 ответа 2

0

Если очень необходима поддержка IE, можете попробовать сделать вот что:

Поместите картинку в контейнер с overflow: hidden.

Оперелите пропорции картинки с помощью JS: image.naturalWidth / image.naturalHeight. А самой картинке задайте CSS: width: 100%; height: 100%;

И затем повесте обработчик на window.onresize, в котором корректируйте высоту контейнера, так чтобы его пропорции были всегда равны пропорциям картинки с учетом текущего поворота картинки. Тогда пустое пространство будет срезаться самим контейнером.

0

Огромное спасибо NoSkill за идею реализации!
Всё получилось! Проверял на браузерах IE 11, Egde, Firefox, Chrome. Привожу рабочий пример.
Стили:

           .image-wrapper {
              position: absolute;
              top: 40px;
              left: 4px;
              right: 4px;
              bottom: 4px;
              width: 50%;
              height: 55%;
              overflow: auto;
              display: block;
            }
            
            #Left {
                position: relative;
                overflow: hidden;
                display: block;
            }
            
            #ImageLeft {
                position: absolute; 
                top: 0px; 
                bottom: 0px; 
                display: block;
                transform-origin: top left;
            }
            
            #Left.rotate90 #ImageLeft {
                transform: rotate(90deg) translateY(-100%);
            }
            #Left.rotate180 #ImageLeft {
                transform: rotate(180deg) translate(-100%, -100%);
            }
            #Left.rotate270 #ImageLeft {
                transform: rotate(270deg) translateX(-100%);
            }

html

        <button type="button" onclick="rotateIMG('ImageLeft', 1)">Поворот на 90° по часовой</button>
        <div class="image-wrapper">
            <div id="Left" class="rotate0">
                <img id="ImageLeft" scl="100" onload="turnImage('ImageLeft');" src="https://cdn.tutsplus.com/vector/uploads/legacy/qt/qt_35_isometric_grid/2.jpg" >
            </div>
        </div>

JS

             function scrollbarWidth() {
                var div = document.createElement('div');
                div.style.overflowY = 'scroll';
                div.style.width = '50px';
                div.style.height = '50px';
                document.body.appendChild(div);
                var scrollWidth = div.offsetWidth - div.clientWidth;
                document.body.removeChild(div);
                return scrollWidth;
            };
            
            function turnImage(id) {
                var img = document.getElementById(id), imgW = img.naturalWidth, imgH = img.naturalHeight, scale = Number( img.getAttribute('scl') );
                var win = img.parentElement.parentElement, winW = win.offsetWidth - scrollbarWidth();
                var div = img.parentElement, deg = Number( div.classList[0].replace("rotate","") );
                if (deg == 90 || deg == 270) {
                    var coef = (winW / imgH), w = ((imgW * coef) * (scale / 100)), h = ((imgH * coef) * (scale / 100));
                } else {
                    var coef = (winW / imgW), w = ((imgW * coef) * (scale / 100)), h = ((imgH * coef) * (scale / 100));
                }
                //console.log('Ширина изображения: ' + imgW + 'px; высота изображения: ' + imgH + 'px; масштаб: ' + scale + '%; ширина блока для изображения (за вычетом ширины полосы прокрутки): ' + winW + 'px; коэффициент: ' + coef + '; угол поворота: ' + deg + ' градусов')
                
                img.setAttribute('style', 'width: ' + w + 'px; height: ' + h + 'px;');
                if (deg == 90 || deg == 270) {
                    div.setAttribute('style', 'width: ' + h + 'px; height: ' + w + 'px;');
                } else {
                    div.setAttribute('style', 'width: ' + w + 'px; height: ' + h + 'px;');
                }
            };
            
            function rotateIMG(id, r) {
                var img = document.getElementById(id);
                var div = img.parentElement;
                switch (div.classList[0]) {
                    case "rotate0": var angle = 0; div.classList.remove('rotate0'); break;
                    case "rotate90": var angle = 90; div.classList.remove('rotate90'); break;
                    case "rotate180": var angle = 180; div.classList.remove('rotate180'); break;
                    case "rotate270": var angle = 270; div.classList.remove('rotate270'); break;
                    default: var angle = 0; break;
                }
                if (r > 0) {
                    angle = (angle + 90) % 360;
                } else {
                    if (angle == 0) angle = 360;
                    angle = (angle - 90) % 360;
                }
                div.classList.add("rotate" + angle);
                turnImage(id);
            };

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.