При нажатии на NavLink элементы в Списке в моем приложении (они NavLink из react-router-dom) они уродливы, когда активны. Я пытался применить к ним некоторые стили, например:
const StyledLink = styled(NavLink)`
text-decoration: none;
color: inherit;
&:focus, &:hover, &:visited, &:link, &:active {
text-decoration: none;
background: none;
}
`;
Но они все еще действуют очень странно, они даже не расположены в центре и занимают всего лишь 2/3 от полной высоты элемента. Я пытался воспроизвести проблему в браузере, но с треском провалился. Но у меня есть изображение из Safari, как плохо это выглядит, когда вы нажимаете или удерживаете его в течение нескольких секунд.
Эта серая область на самом деле является элементом NavLink. Даже если видимый контент находится внутри NavLink, он не занимает полную высоту. Я пытался применить height: 100%, но все равно безрезультатно.
Проблема не видна в Android Chrome. Только Сафари
