3

enter image description here I'm getting an un-explainable (to me) blue flickering/flashing in I.E., FireFox, Chrome when I scrub the handle over my before an after image. Here's my jsfiddle example: http://jsfiddle.net/GrokDD/FyrAy/

Scrub the handle left and right repeatedly. You'll see it in most browsers.

What is causing this? How can I get rid of it?

I am guessing it has to do with the underlying image being selected maybe? I tried:

img{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

It fixed it in Chrome, but not IE. or Firefox... humm... Any suggestions would be appreciated.

GrokDD
  • 70
  • 4

1 Answers1

2

Seems to be the image being highlighted that is causing it.

Adding the following on #before and #after seems to of fixed it http://jsfiddle.net/FyrAy/1/

<div style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user select:none;' unselectable='on' onselectstart='return false;' onmousedown='return false;'>

Taken from How do I disable text selection with CSS or JavaScript?

Community
  • 1
  • 1
Ben Crook
  • 607
  • 9
  • 15
  • Rock 'n Roll Ben! Should I update my jsFiddle for other's to learn from? Is that the common practice? – GrokDD Mar 22 '14 at 02:33
  • I'm new here to so I'm not sure, I'd say leave it as it is then people can see what the problem is and they can view this one for the fix. Glad I could help :) – Ben Crook Mar 22 '14 at 04:39