Media Query не меняет CSS при максимальном использовании браузера и вкладок переключения

Вот немного CSS, который имеет простой медиа-запрос.

http://codepen.io/anon/pen/nuxaw

Когда я сжимаю страницу так, чтобы порт представления был меньше 320, окно становится зеленым. Теперь, если я последую этим шагам, браузер будет максимизирован, но CSS все равно будет находиться в состоянии, заданном медиа-запросом на 320 пикселей.

  • При открытии страницы на первой вкладке и размера браузера, чтобы < Разрешен медиа-запрос 320px,
  • Откройте новую вкладку, перейдите на сайт, например facebook.com.
  • Разверните браузер.
  • Отведите сеанс расширенного просмотра от первой вкладки. Не активируйте первую вкладку в течение нескольких минут.
  • Активировать первую вкладку с максимальным увеличением окна.
  • В этот момент порт представления должен быть полноэкранным, но элемент все равно должен быть зеленым блоком.

Это означает, что запрос < 320 media все еще применяется. Однако если вы откроете отладчик, вы увидите, что применяемый CSS, хотя и является обычным CSS. Это ошибка с Chrome?

http://imgur.com/a/TIAAi

Вот альбом на imgur, который показывает последовательность.

  • Открыто, максимально.
  • Уменьшен просмотр, разрешен медиа-запрос.
  • Максимизирован, все еще используется медиа-запрос.
  • Глядя на CSS, он говорит, что размеры 300x200, но пользовательский интерфейс показывает 100x100. Что-то сломано.

Ответ 1

Исправление этой проблемы - убедить Chrome обновить рендер на странице. Вы можете сделать это путем изменения размера, максимизации или изменения класса в теге body. Я обновил код, чтобы использовать событие visibilitychange, которое срабатывает во время переключения вкладок для переключения класса на тело, чтобы заставить Chrome обновлять рендеринг страницы.

http://codepen.io/anon/pen/nuxaw