Why the unit flickers when hovering?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
40 views
Hello, I will be glad if someone explain one unknown phenomenon when you hover over the element, as Google has not helped me, I hope for you.
In General, there is a page with blocks (in this case the casino), when hovering which is caused strange flickering edges of the block on which the cursor is induced and elements adjacent, feeling like the image is slightly reduced and lost the right edge of the shadow (very hard to explain easier to go and see). This occurs in chrome and in Safari and Opera too.
Interesting is the fact that exactly the same blocks on the main page (only there are more since the mesh is different) and there is such a phenomenon is not observed. Tell me what could be the problem?

UPD: solution Was found, who may be interested, all decided by property: will-change
by | 40 views

2 Answers

0 like 0 dislike
apparently, different rounding rules non-multiple of the size of object-fit and transform. and perhaps even globally - that is on the cpu and that gpu.

add to your .slot-image small increase, less pixel to always drop in a big way, not less. something like transform: scale(1.02, 1.02);
by
0 like 0 dislike
add to .item casino .thumb-block .slot-image and icons which in the right menu jumps
transform: translateZ(0);
and for
.item-casino:hover .slot-image .item-slot:hover .slot-image { -webkit-transform: scale(1.2,1.2) translateZ(0); transform: scale(1.2,1.2) translateZ(0); }
by

Related questions

0 like 0 dislike
1 answer
asked May 21, 2019 by webe
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
asked Jun 4, 2019 by stainer
0 like 0 dislike
2 answers
0 like 0 dislike
2 answers
asked Jun 11, 2019 by danilazharikov
110,608 questions
257,187 answers
0 comments
40,796 users