Я пытался найти некоторые ответы здесь и в другом месте, но, похоже, не могу найти.Вопрос очень противоречивый, и я не уверен, что делать.Похоже, он появляется только на устройствах iOS, использующих Chrome, но не на Safari, не на Android Chrome и не в других версиях Firefox.
Я создаю свое веб-портфолио в VueJS, поэтому все префиксы фиксируются в веб-пакете.У меня есть следующий код для моей кнопки (SCSS):
.hide-component-btn{
width: 100%;
height: 100%;
background-color: rgb(240, 248, 248);
border: none;
color: $default-text-color;
padding: 0;
cursor: pointer;
transition: background-color ease-in-out 0.2s;
&:hover, &:active{
color:white;
background-color: $component-secondary-color;
i{
color:white;
}
}
}
.hide-component-btn-shadow-left{
box-shadow: inset 13px 13px 0px -5px $component-secondary-color;
}
.hide-component-btn-shadow-right{
box-shadow: inset -13px 13px 0px -5px $component-secondary-color;
}
Последние 2 упомянутых класса .hide-component-btn-shadow-left и .hide-component-btn-shadow-right являются тенями, которые применяются по одному на основе переменной, котораяопределяет, использует ли пользователь приложение / веб-страницу левой или правой рукой.Пользователь может щелкнуть / нажать на кнопку со стрелкой, чтобы изменить положение основной кнопки навигации, которая, в свою очередь, меняет большую тонкую кнопку (которую вы видите на скриншотах), облегчая ее использование на больших экранах.
На изображении ниже показано правильное ожидаемое поведение.Вы можете видеть, что левая часть экрана имеет высокую и тонкую кнопку, о которой я упоминал ранее (которая служит для скрытия компонента).На скриншоте показана кнопка слева.Но он также может появиться с правой стороны, если пользователь будет правшой, в этом случае высокая кнопка появится с правой стороны, а содержимое появится с левой стороны, как показано ниже.
Слеваслучай использования для руки:
случай использования для правой руки:
Предыдущие снимки экрана показывают, как это должно выглядеть на большинстве браузеров и разрешений (ожидаемое поведение).
На следующих экранах показано наличие артефакта, другими словами, неожиданное поведение (обратите внимание на строку, расположенную вдоль правой стороны кнопки):
А вот снимок экрана с устройства iOS (iPhone 7), использующего Chrome, показывающий то же самое точное поведение (стрелка показывает артефакт, который присутствует, вдоль правого края кнопки, то же самоекак на предыдущем скриншоте):
Не могу понять, что на самом деле могло спровоцировать этот артефакт и характерно только для iOS и chrome.Я попытался изменить цвет фона на другой, прозрачный и ничего.Единственный способ действительно удалить артефакт - это удалить свойство box-shadow, которое мне как-то нужно.Какие-либо предложения ?Вы можете проверить это самостоятельно на calexandru.com .