Почему один и тот же CSS дает разные результаты в Mobile Safari для <img>и <object>? - PullRequest
Новая
       15

Почему один и тот же CSS дает разные результаты в Mobile Safari для <img>и <object>?

0 голосов
/ 18 июня 2020

Сегодня я тестировал изменение, которое я сделал для одного из своих веб-сайтов. CSS такой же, и все выглядит нормально в Desktop Safari, Firefox и Chrome. Однако в мобильном Safari две страницы, которые у меня есть, одна из которых использует <img>, а другая использует <object>, визуализируются совершенно по-разному, с одним рендерингом <img>, как и ожидалось, и <object> растягиванием страницы непредвиденным образом, несмотря на применение того же CSS.

Я приложил скриншоты и HTML ниже. В обоих случаях я использовал симулятор Xcode, так как было легче загружать изображения. Прошу прощения за черные артефакты по бокам.

<img> версия. Не обращайте внимания на ужасную попытку симулятора Xcode отрендерить PNG - тот факт, что он не смог правильно отрендерить изображение, не имеет отношения к проблеме, с которой столкнулся в этом вопросе.

IMG tag version

<div class="mapdiv">
    <a href="maps/Houston.pdf"><img src="maps/Houston.png" alt="Houston"></a>
</div>

Активно: http://metrorouteatlas.net/cities/north_america/houston.html (ПРИМЕЧАНИЕ: эта страница может измениться в любой момент, и текущее состояние страницы может не иметь отношения к текущему вопросу)

<object> версия:

OBJECT tag version

<div class="mapdiv">
    <a href="maps/002.pdf"><object class="mapobject" type="image/svg+xml" data="maps/002.svg"></object></a>
</div>

Live: http://metrorouteatlas.net/openttd/002/bennpool.html (ПРИМЕЧАНИЕ: эта страница может измениться в любое время, и текущее состояние страницы может не иметь отношения к текущему вопросу)

Вот CSS: 

.mapdiv, .mapdiv-lrg {
    text-align: center;
}

.mapdiv img {
    width: 75%;
}

.mapdiv-lrg img { /* Double width maps */
    width: 100%;
}

.mapobject {
    width: 75%;
}

.mapobject-lrg { /* Double width maps */
    width: 100%;
}

@media (max-width: 800px) {
    .mapdiv img {
        width: 100%;
    }
    .mapobject {
        width: 100%;
    }
}

Как видно из двух изображения, последний, кажется, растягивает ширину всего остального на странице и не может применить 100% ширину, как указано в медиа-запросе. Изображение представляет собой PNG 3200x3200, а объект - SVG 1600x1600 с viewBox="0 0 1600 1600" preserveAspectRatio="xMidYMin meet".

Мне любопытно, почему версия <object> делает это и как я могу это исправить. Любое понимание будет оценено.

...