Подтвердить что ты не робот

Свойство CSS3 transform работает по-разному в Internet Explorer

Я использую следующий CSS, чтобы центрировать div в середине моей страницы:

.someWrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.centredDiv {
    width: (some width);
    height: (some height)
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

Я тестировал это в Chrome, Firefox и Safari, и он работает по назначению. Тем не менее, в Internet Explorer (тестирование на IE11), когда он центрирует div в середине окна, IE, похоже, считает, что все еще есть невидимый "призрак div" 50% и 50% вниз, который не был преобразован.

Это приводит к созданию целого пучка белого переполнения и ненужных полос прокрутки в нижнем правом углу экрана. Если я включу переполнение: скрытое, это может устранить проблему, но это не выполнимый вариант на моем веб-сайте.

Итак, почему IE делает это и есть ли простой способ обойти его?

EDIT: Следующий код иллюстрирует проблему. Откройте код в Chrome или Firefox, нет переполнения. Откройте его в IE (тестирование в IE11), и вы увидите переполнение, вызывающее пустое пространство и полосы прокрутки вниз и вправо.

<!DOCTYPE HTML>
  <html>
    <head>
     <style>
       html, body {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
       }

       #wrapper {
         width: 100%;
         height: 100%;
         position: relative;
       }

       #centred {
         width: 90%;
         height: 90%;
         position: absolute;
         top: 50%;
         left: 50%;
         background-color: red;
         -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
       }
     </style>
   </head>
 <body>
   <div id="wrapper">
     <div id="centred">
       Hello world!
     </div>
   </div>
 </body>
</html>
4b9b3361

ОТВЕТЫ

Ответ 1

Простой подход

Вместо позиционирования из top и left, вместо позиции bottom и right. После того, как вы это сделали, просто измените ваши переводы -50% на положительные 50%. Это приведет к удалению переполнения. Вы можете увидеть эти изменения в действии здесь: http://jsfiddle.net/bd17gsss/

Стоит отметить, что эта ошибка все еще подана, и наша команда все равно будет уделять ей должное внимание, когда время и циклы позволят нам это сделать.

Оригинальный ответ

В этой конкретной демонстрации появляется ошибка компоновки с position: absolute. Он ведет себя подобно position: relative, когда этого не должно быть. Я открыл ошибку по этой проблеме, чтобы команда Internet Explorer провела дальнейшие исследования.

В настоящее время вы можете переключить свое значение позиции от absolute до fixed, которое появляется для правильного отображения центрированного элемента. Это не позволяет вам использовать фиксированный набор измерений снова и снова и вместо этого позволяет использовать этот подход как класс стиля .modal общего назначения, который будет центрировать все, к чему он применяется.

Очевидное предостережение с этим изменением состоит в том, что ваш элемент позиционируется в соответствии с окном просмотра и больше не является самим документом. Это эффективно заморозит его на экране.

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

Чтобы продемонстрировать успех, этот подход имеет различные размеры, мы можем прокрутить несколько наборов примеров и проверить рендеринг элемента, чтобы он был правильно центрирован:

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

Конечный результат можно посмотреть здесь: http://jsfiddle.net/jonathansampson/c00u5ev8/

Ответ 2

Если на самом деле просто ответил на этот вопрос в другом потоке, вы можете использовать display: table; и display: table-cell; для решения этой проблемы (работает также кросс-браузер!), см. мой код в реальном времени: http://codepen.io/TheDutchCoder/pen/GggWqP

В вашем случае это будет:

#wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

#centred {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Ответ 3

Ваш код слишком сокращен и без рабочего примера трудно предложить какие-либо советы. Меня беспокоит часть (some dynamic height/width), т.е. Это поражает меня как место, где может быть ваша проблема.

Для справки вы можете проверить собственное объяснение Microsoft Transform в IE.

Ответ 4

Для меня проблема с переводом, не работающим в IE 11, была просто в том, что страница автоматически запускалась в режиме совместимости, заставляя IE 11 работать, как если бы это был более старый браузер, который не поддерживает перевод в CSS.

Мое решение было просто поместить этот тег в голову:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  ....

Это говорит, что IE запускается с использованием "последнего" кода, что по существу означает, что IE 11 отображает страницу с кодом IE 11, а не как более старую версию браузера.

Если вы хотите заморозить совместимость с какой-то определенной версией IE, вы можете сделать это с помощью этого тега, используя разные значения содержания. Значение "IE-Edge" сообщает ему использовать последний доступный код.

Если вы хотите посмотреть, отображается ли ваша страница в режиме совместимости, нажмите F12, чтобы открыть инструменты разработчика в браузере, перейдите на вкладку "Консоль" и перезагрузите страницу. На вкладке консоли будет указано что-то вроде:

http://yoursite.com is running in Compatibility View because ...

если он действительно работает в режиме совместимости.

Ответ 5

Просто добавьте transition: all .2s ease-in-out; под свою линию преобразования.

Ответ 6

Если кому-то еще все еще нравится пытаться обойти эту проблему (видя, что ошибки Internet Explorer никогда не исправляются, потому что вместо этого мы все любим обходить их), и вы хотели бы использовать position: relative; вместо position: absolute; или сверху и слева, а не снизу и справа, попробуйте это вместо:

.centredDiv {
    position: relative;
    top: calc(50% - 100vh);
    left: calc(50% - 100vw);
    transform: translate(-50%, -50%) translate(100vw, 100vh);
}

Можно использовать 100 видов высоты/ширины вида или произвольное значение в пикселях, представляющее максимальную теоретическую высоту/ширину прокрутки, чтобы верхние/левые значения никогда не переполняли родительский объект, а затем просто смещали его в преобразовании.

Если бы я был в лифте с Гитлером, Сталиным и Internet Explorer, и у меня был пистолет только с одной пулей... Я бы убил Internet Explorer.