Element retains hover styles on Safari mobile

I have a styled.div with hover on it (it works as a kind of navigation in my project). It contains inside, so it redirects to a similar page once it's clicked.

const CarouselTabMobile = styled.div`
  cursor: pointer;
  align-self: flex-end;
  transition: color .1s ease;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid ${borderColor};
  margin-left: 1.285rem;
  height: 6.285rem;
  width: 80%;
  @media screen and (max-width:400px) {
    width: 18.857rem;
  }
  max-width: 18.857rem;
  border-radius: 0.285rem;
  border-left-color: ${backgroundColors.green3};
  border-left-width: 0.285rem;
  transition: box-shadow 200ms ease-in-out 0s;
  :hover {
    box-shadow: 0 0.142rem 0.571rem ${shadowColor};
  }
`;

It works fine on desktop Safari, but on iPhone Safari the hover styles (box-shadows) remain after I've clicked an element (and the page changed). If after that I touch any place on a new page - the hover disappears.

Can you guys help me to figure out what's wrong here?