CSS-радиус границы не работает в Safari после переключения на gatsby-плагин-изображение
на моем ноутбуке я вижу радиус границы изображения, но, похоже, он не работает на iphone или iPad. (т. е. изображение квадратное только на iPhone / iPad, я не видел, чтобы к изображению применялся радиус границы:25 пикселей)
РЕДАКТИРОВАТЬ 11-24: извините, это фрагмент кода, который я использую в стиле компонента
export const MyImageContainer = styled(GatsbyImage)`
cursor: pointer;
border-radius: 25px;
`
Да, это старая "ошибка". Этот взлом css должен это исправить.
-webkit-mask-image: -webkit-radial-gradient(white, black);
У меня аналогичная проблема с радиусом границы после перехода на изображение Гэтсби-плагина.
Не уверен, что это отвечает вашему вопросу, возможно, вы захотите добавить более подробную информацию, и некоторые фрагменты кода будут полезны.
Я использую стилизованный компонент для своего проекта. Мое решение состояло в том, чтобы нацелиться на img
Например
export const MyImageVariable = styled(GatsbyImage)`
border-radius: 50%;
img {
border-radius:50%;
}
`