chrome transition闪烁BUG

时间 2019-11-12

标签 chrome transition 闪烁 bug 栏目 Chrome 繁體版

原文原文链接

前段时间写鼠标悬停元素上移效果时，当鼠标刚好放在元素边缘时，chrome出现一直上下移动的问题，其余浏览器表现正常。缘由尚不知，多是实现方式不对吧（PS：使用top实现），虽然不知道缘由，可是问题仍是要解决的，分享一个能绕开的实现方式。css

说到鼠标悬停元素上移，首先想到的是鼠标悬停时元素上移，而后应用transition来实现渐变效果。html

一、使用top实现（该实现方式chrome浏览器闪烁，避免使用）chrome

<!--html--> <div class="test"></div> /*css*/ .test { position: relative; top: 0; transition: top 0.5s; } .test:hover{ top: -10px; }

二、使用transform实现（推荐）浏览器

<!--html--> <div class="test"></div> /*css*/ .test { transform: translateY(0); transition: transform 0.5s; } .test:hover{ transform: translateY(-10px); }