I'm trying to implement div that follows with cursor and I made simple example of it that uses
$(document).on('mousemove', function(event) {
$('#pursuer').css({
top: event.clientY + 10 + 'px',
left: event.clientX + 10 + 'px',
});
});
Full example is here.
But there is the bug - when I moving the cursor the edges of my div get dark. Firstly I was thinking that the problem lay in color with transparency:
background-color: rgba(220, 165, 167, .4);
but changing to hex
background-color: #f0dadb;
didn't help
It there a way to avoid this bad effect?
UPD: I'm using Chrome 42.0.2 / FF 37.0.2 / Opera 29 on windows 8.1. Reproduced in each one. But the most strangest thing is that I really can't reproduce it on OSX (in any browser above). Even more - I can't screenshot the problem in windows because screenshot shows that everything is ok, but actually it isn't
UPD 2: as I noted in comment - I have no any additional plugins and extensions in browsers. Also I can reproduce this issue only on 2 of 3 windows PC (all with windows 8.1 aboard)...trying to find out the differences. Not sure, but looks like the problem in OS.
UPD 3: as advised I did following:
1) removed background, added text, added border (with radius and without radius) - the problem didn't appear
2) removed background, added additional div filler:
<div id='pursuer'>
<div id='filler'></div>
</div>
with styles
#filler {
position: relative;
background-color: #f0dadb;
border-radius: 35px;
width: 100%;
height: 100%;
}
and the problem appeared again. Hence, the cause in background
UPD 4: not only in background-color - if I put an image as a background then I can see the same issue