* Элемент <picture>имеет неожиданное поведение на iOS

Question

Я использую элемент <picture> с srcset для загрузки разных изображений для разных разрешений экрана.Это из соображений художественного руководства - мне нужны разные формы - поэтому мне нужно использовать <picture>.

. Проблема в том, что она не работает на iOS - ни в Chrome, ни в Safari.Это несмотря на то, что информация «Можно ли использовать» указывает на то, что она должна: https://caniuse.com/#feat=srcset

    <picture>
       <source media="(min-width: 62em)" srcset="hero-home.jpg" sizes="100vw">
       <source media="(min-width: 48em)" srcset="hero-home-991x490.jpg" sizes="100vw">
       <source media="(min-width: 34.375em)" srcset="hero-home-767x460.jpg" sizes="100vw">
       <source srcset="hero-home-549x575.jpg">
       <img src="hero-home.jpg" class="crop">
    </picture>

Я также использую <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">, что, на мой взгляд, является одним из распространенных решений этой проблемы.

Насколько я могу судить, я все делаю правильно, но на iOS (и только на iOS) он ненадолго загружает правильное изображение, а затем переключается на 62em srcset.

Кто-нибудь сталкивался с таким поведением раньше?Я скучаю по какой-то странной сетчатке?

Answer 1

Проверьте CanIUse , чтобы узнать, какие из новых элементов HTML5 поддерживаются, когда есть сомнения.

В этом конкретном сценарии это может быть комбинированная проблема любого из следующего:

отсутствие поддержки элемента <picture> с использованием только свойства min-width против max-width, а неиспользование адаптивных измерений для определения правильного размера области просмотра для запасных вариантов (например, с использованием 50vw)