Vue разбивает элемент изображения в Safari - PullRequest
Новая
       48

Vue разбивает элемент изображения в Safari

0 голосов
/ 28 апреля 2020

У меня есть очень простая HTML страница, содержащая элемент изображения. Элемент рисунка работает как положено. Small.jpg запрашивается на экранах мобильных устройств, а large.jpg - на экранах рабочего стола. Я только когда-либо вижу один запрос изображения в зависимости от ширины экрана.

Проблема возникает в Safari, когда на страницу добавляется простой экземпляр vue. Правильное изображение всегда отображается, однако я вижу запросы как small.jpg, так и large.jpg. Мобильный инспектор показывает инициатор запроса small.jpg в качестве страницы (ожидается). На самом деле инициатором large.jpg является vue экземпляр.

Проблема существует только в iOS и MacOS safari. Chrome в порядке.

Удаление экземпляра vue решает проблему.

Полные сценарии ard страницы отображаются ниже 

<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
      {% include 'script-tags' %}
    </head>
    <body>
        <div id="app">
            <picture>
                <source media="(max-width: 900px)" srcset="small.jpg">
                <img src="large.jpg" alt="">
            </picture>
        </div>
    </body>
<html>

Экземпляр Vue 

import Vue from 'vue';

if(document.getElementById("app")) {
  new Vue({ el: '#app'});
}

Вот простой пример codepen , который демонстрирует проблему.

Если вы проверите ссылку в Safari, уменьшите ширину браузера ниже 900 и обновите страницу sh, вы увидите, что оба изображения будут запрошены. Просто закомментировав vue instace, вы заставите элемент изображения работать правильно, и только одно изображение будет запрошено.

...