Фоновые изображения не отображаются на iOS только после добавления на главный экран

У меня есть такой css:

#thumbnail {
    background-image: url(bla.jpg),
    background-size: cover,
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Он отлично отображается в iOS Safari и везде. Однако, когда я «Добавлю на главный экран» страницу, изображение не будет отображаться.

Что я пробовал (безуспешно):

  1. Использование background-size: contain

  2. Использование JavaScript для «ленивой загрузки» фонового изображения.

  3. Динамическое добавление его как <img> вместо фонового изображения с использованием JavaScript.

  4. Добавление его прямо в HTML-документ. Он начинает отображаться, но не подчиняется никакому стилю CSS, даже после того, как я попробовал его со стилем JavaScript и с атрибутами width и height (почему?).

  5. Использование background-position: top center вместо 50% 50%.

  6. Использование другого формата изображения, такого как .png.

  7. Применение фонового изображения к псевдоэлементу ::after, как показано ниже:

    #thumbnail::after {
    content: '';
    display: block;
    padding-top: 100%;
    background-image: url(...),
    background-size: cover,
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Это просто не работает должным образом.

Я искал в StackOverflow и Google ту же проблему, но ни один из них не столкнулся с той же проблемой, поскольку большинство из них ссылаются на проблемы в браузере Safari и неподдерживаемое свойство CSS (что не является проблемой в моем случае).

Может кто знает в чем может быть проблема и как ее решить?

Эта проблема возникает только после "Добавить на главный экран". Он отлично работает в браузере iOS Safari и браузере iOS Chrome.


ios javascript html css safari
person yqlim    schedule 23.07.2018    source источник
comment
Вы проверили это: stackoverflow.com/questions /17341728/ ... stackoverflow.com/questions/12824099/   -  person Ason    schedule 24.07.2018
comment
@LGSon да, я проверял, но это было 5 лет назад, и это было только в Safari, что в моем случае не проблема.   -  person yqlim    schedule 25.07.2018

Ответы (2)


arrow_upward
0
arrow_downward

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

Единственный обходной путь, который мы смогли сделать, — это удалить метатег, чтобы он был «совместим с Apple-mobile-web-app» и позволить пользователям открывать его в Safari, где все работает нормально.

person Iyad    schedule 23.07.2018
comment
это, безусловно, способ, но тогда он побеждает цель и опыт добавления его на главный экран. - person yqlim; 23.07.2018

arrow_upward
0
arrow_downward

попробуйте заменить background-image: url(...) на background: url(...)

person Ingus    schedule 23.07.2018