Использование элемента шаблона 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 или я могу что-то с этим сделать?