CSS-запрос и переход не работают правильно в IE и Edge - PullRequest
Новая
       21

CSS-запрос и переход не работают правильно в IE и Edge

0 голосов
/ 23 мая 2018

У меня есть div с некоторыми стилями и фиксированной шириной для больших экранов: 

.div {
    width: 1600px;
    transition: width 0.5s
}

И я использую медиа-запрос с меньшей фиксированной шириной для небольших экранов: 

@media only screen and (max-width: 1000px) {
    .div {
        width: 400px;
    }
}

Моя проблема в том, что когда я захожу на сайт (не обновляю), если ширина браузера превышает 1000 пикселей, анимация запускается (div получает от 400 до 1600 пикселей)!

Я пытался добавить переход к медиазапросу, но переход не будет работать, когда я изменяю размер браузера (от 400 до 400 пикселей), что является нормальным.

Я не могу понять, почему браузер использует стиливнутри медиа-запроса, когда он не соответствует браузеру с!

Пожалуйста, проверьте этот URL с очень простым примером:

https://octamerous -hunts.000webhostapp.com /

Обновление Я только что протестировал в Mozilla и Chrome, и он работает без проблем, на самом деле проблема возникает только при использовании IE и Edge!

Код: 

<head>

    <style>

        .div1 {
            position: relative;
            width: 1400px;
            height: 200px;
            left: 50%;
            margin-left: -700px;
            background-color: royalblue;
            transition: width 0.5s, margin-left 0.5s;
        }


        @media only screen and (max-width: 1399px) {
            .div1 {
                width: 1000px;
                margin-left: -500px;
            }
        }

    </style>

</head>


<body>

    <div class="div1">



    </div>

</body>

Upдата 2

Я нашел похожий вопрос:

IE / Edge - переходы CSS3 запускаются при навигации

Но предоставленное решение неt работа!

Обновление 3

Я нашел решение:

IE11 запускает переход CSS при загрузке страницы, когда не применяется медиа запросСуществует

Это исправить проблему с IE и Edge!

...