Использование элемента шаблона html для отложенной загрузки адаптивных изображений: ошибка Safari

Я хочу использовать элемент шаблона HTML для ленивой загрузки адаптивных изображений. Он отлично работает в Firefox и Chrome, но Safari (11.1) не выбирает правильное изображение из srcset. Вот как выглядит мой тег изображения:

<img src="/locations/hamburg.png" alt="Hamburg" 
    srcset="/locations/_w300/hamburg.png 300w,
        /locations/_w600/hamburg.png 600w,
        /locations/_w1024/hamburg.png 1024w,
        /locations/_w1440/hamburg.png 1440w,
        /locations/_w1920/hamburg.png 1920w" 
    sizes="(max-width: 767px) 75vw, 85vw">

Так что в моем случае Safari просто выбирает изображение размером 300 пикселей, даже при том, что область просмотра имеет ширину 1600 пикселей, и поэтому она должна принимать ширину 1920 пикселей.

Я быстро сделал ручку, чтобы продемонстрировать это: https://codepen.io/oliverspies/pen/GGmBZW

Это ошибка в Safari или я могу что-то с этим сделать?

0 ответов

Другие вопросы по тегам