This spotlight effect does not work in Safari 7.1+
Why is this CodePen not working in Safari? Of all the lighting tutorials, I worked with this because I did what I wanted. It works in Chrome / Firefox, but doesn't work at all (even partially) in Safari 7.1+. Can someone shed some light?
http://codepen.io/cchambers/pen/Dyldj
$(document).on("mousemove", function(e){
$(".spotlight").css("left",e.clientX-100).css("top", e.clientY-100);
});
body{
margin:0;
background:url(http://i.imgur.com/KHucaTQ.jpg);
background-size:100% auto;
overflow:hidden;
}
.spotlight{
cursor:none;
position:absolute;
top:100px;
left:200px;
height:200px;
width:200px;
border-radius:50%;
background:transparent;
box-shadow:0 0 0 2000px rgba(0,0,0,.85);
}
.ha{
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="spotlight ha"></div>
source to share
It turns out that in order to fix the problem, I had to change the "spread" in the shadow line to be 1900px
instead 2000px
. By no means define a shape or shape why, but that at least fixed it in my version of Safari. Will be checking version 8 and some others and hope this fixes it.
Just wanted to add a piece of code in case that might stop anyone.
.spotlight{
cursor:none;
position:absolute;
top:24%;
left:7%;
height:20%;
width:17%;
border-radius:50%;
background:transparent;
box-shadow:0 0 0 1900px rgba(0,0,0,.65);
z-index: 2;
}
source to share
Change your css to this:
.spotlight{
cursor:none;
position:absolute;
top:100px; left:200px;
height:200px;
width:200px;
border-radius:50%;
background:transparent;
box-shadow:0 0 0 2000px rgba(0,0,0,.85);
-webkit-box-shadow:0 0 0 2000px rgba(0,0,0,.85);
}
The added one -webkit-
should do the trick.
Alternatively, update Safari - you may be using an outdated version.
Read box-shadow
and Browser Compatibility: box-shadow - MDN Docs
source to share