У меня есть небольшой инструмент для разработки вашего любимого покемона, расположенный здесь . Некоторое время назад я получал периодический отчет от пользователей о том, что изображения не работают - они просто видят пустые серые круги. Короче говоря, все они, кажется, используют Chrome на Android, и я подтвердил, что некоторые друзья с телефонами Android не работают на них, используя Chrome 78 на Android 8 или 9.
Однако,он отлично работает для другого друга, использующего тот же Chrome на Android 10 и на телефоне моего мужа (Android 6), где Chrome немного не обновился и все еще был на версии 76, он также работал до он только что обновил его до 78 (после чего у его телефона сразу же возникла та же проблема). Chrome 78 на моем iPhone или ноутбуке работает нормально.
Если я вручную открою прямую ссылку на одно из изображений на своем телефоне после обновления, это работает нормально, так что, предположительно, у него нет проблем загрузка изображений (что в любом случае было бы странно, поскольку они размещены в одном домене).
Оглядываясь назад, я получаю первые сообщения, которые я получил, первые сообщенияОдин из них, похоже, относится к 12 октября, когда в сентябре был выпущен Chrome 77, поэтому кажется правдоподобным, что проблема впервые появилась там.
Однако я не совсем понимаю, как к этому подойти. Что могло измениться в Chrome 77, только на Android <10, что может быть причиной этого, и что можно сделать, чтобы это исправить? Я не думаю, что я делаю что-то ужасно странное на этой странице;это CSS, который применяется к соответствующим элементам: </p>
.item-list li {
margin:0;
display:inline-block;
height:106px;
width:106px;
border:3px solid transparent;
text-align:center;
position:relative;
vertical-align:top;
overflow:hidden;
border-radius:100%;
color:#F7F7F7;
}
.item-list li span {
display:block;
width:100px;
height:100px;
padding:3px;
background:#F7F7F7;
border-radius:100%;
}
.item-list li img {
position:absolute;
top:-7px;
left:-11px;
z-index:100;
}