Hover에서 CSS Flicker!

운이 좋아서 간단한 호버 효과를 하기로 했습니다. 정말 간단한 CSS 스타일링. 커서가 버튼 위에 있으면 버튼이 아래로 이동하여 클릭 효과를 시뮬레이트합니다. 너무 간단해서 아무 것도 잘못될 수 없습니다. 내가 틀렸어.

마우스를 올려 버튼을 아래로 이동합니다.

button:hover {
    margin-top: 10px;
}

내 버튼에서 강렬한 깜박임이 발생했습니다. 다른 브라우저에서 문제를 확인했습니다. Firefox는 그런 문제가 없는 유일한 것입니다. 크롬, 오페라, 사파리도 같은 깜박임 문제가 있습니다. (Firefox로 가세요! 거기에서 무엇을 했는지 확실하지 않지만 하지 말았어야 했습니다.)

여기에서 깜박임을 가지고 놀아보세요.

정말 무슨 일이야,

인터넷 검색 대신 문제를 트윗하기로 결정했습니다.

그리고
달콤한 해결책을 내놓았습니다. (지금은 점점 게을러지고 있습니다.)





매튜 콕스










아, 그것은 웹킷 브라우저의 의도된 동작입니다. 짜증나지만 그게 이유가 될 것입니다.이것은 그것을 고치기 위해 할 것입니다. codepen.io/matthewcoxx/pe…


오후 20:11 - 2018년 9월 1일









아이디어는 이전 클릭 가능 영역을 채우기 위해::after 의사 요소를 추가하여 버튼이 이동하더라도 커서가 여전히 클릭 가능 영역 내에 머물도록 하는 것입니다. 간단하고 달콤합니다.

여기에서 솔루션을 가지고 놀아보세요.

하지만 어쨌든 여전히 문제에 대해 Google 검색을 했습니다.

그리고 그곳에서 11년 전 CSS Jitter에 대한 훌륭한 게시물을 찾았습니다. https://css-tricks.com/avoid-css-jitter/

이제 무슨 일이 일어나고 있는지 알 것입니다. jitter man의 예는 정말 재미있습니다.
https://css-tricks.com/examples/CSS-Jitter/

확인,

안녕.

나를 따르라