Блог

Главная - Вопросы по программированию - CSS: Google Chrome показывает обратное: целевой переход, если CSS загружен вечно

CSS: Google Chrome показывает обратное: целевой переход, если CSS загружен вечно

#css #google-chrome

#css #google-chrome

Вопрос:

У меня есть следующий довольно простой CSS для отображения меню с использованием CSS: target

 nav {
  position: absolute;
  height: 100vh;
  display: block;
  width: 20vw;
  margin-left: -30vw;
  transition: margin-left 0.5s ease-in;
  background-color: lightgrey;
}

nav:target {
  margin-left: 0vw;
}

и несколько примеров HTML:

     <body>

        <nav id="menu">
            <a href="#">Close</a>
        </nav>

        <a href="#menu">Show menu</a>
    </body>
</html>

Хотя это работает, в Google Chrome при загрузке страницы меню выдвигается.

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

Похоже, что Google Chrome видит изменение от отсутствия стилей, примененных при загрузке страницы, к применению стилей в таблице стилей как изменение свойства margin-left и отображает переход.

Есть ли какой-либо способ достичь того же результата с использованием встроенных стилей или <style > тега? Я могу применить transition свойство к nav:target вместо nav , но тогда меню анимируется только при перемещении, оно не выдвигается и просто исчезает.

Комментарии:

1. вы наверняка столкнулись с FOUC из-за задержки загрузки CSS

2. Это определенно похоже. Если бы это был просто flash, я бы не возражал, но он отображает всю анимацию целиком.

3. Я думаю, что лучшим решением для этого является загрузчик страницы, который вы удаляете, когда загружены все стили и скрипты