Edit Question - KnowledgeHub

Title Body

I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering. Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine. Wish I had more information, but maybe someone else has run into a similar problem. .swatch { -webkit-box-shadow: #EFEFEF 2px 2px 0px; -webkit-transform: scale(1); -webkit-transition-duration: 0.2s; border: 1px solid white; position: relative; z-index: 1; .swatch:hover { position:relative; z-index:10; transition-duration: 0.2s; transform:scale(1.8); -webkit-transition-duration: 0.2s; -webkit-transform:scale(1.8); } It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project. Any thoughts are appreciated.

Tags (comma-separated) Cancel