Я создаю PWA и тестирую как с Chrome, так и с Safari. Кажется, все работает нормально в обоих браузерах, за исключением границ моей кнопки.
Я использую следующий CSS на кнопке:
{
-webkit-appearance: none;
background-color:<%= ConfigurationManager.AppSettings["default_color"] %>;
background-image: url('../Images/pick.png');
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
border-style: solid;
border-color:<%= ConfigurationManager.AppSettings["default_color"] %>;
border-width: 10px;
/* TL - TR - BR - BL */
border-radius:0 5px 5px 0;
height:100%;
margin: 0;
padding: 0;
width:100%
}
В Chrome и Firefox это работает нормально, а граница плавная.
Однако в Safari, кажется, есть дополнительная белая вертикальная граница.
Кнопка, таким образом, раздавлена и не совпадает с кнопкой слева (без границ)
Что здесь происходит.
Я использовал веб-инспектор и не могу найти проблему.
Мне действительно нужны пользовательские границы, поскольку любой другой метод искажает фоновое изображение при использовании в других разрешениях.
(Этот PWA предназначен для использования в браузерах и телефонах)