javascript - 此聚光灯效果在 Safari 7.1+ 中不起作用

Question

为什么这个 CodePen 在 Safari 中不起作用？在所有 Spotlight 教程中，我选择了这个教程，因为它满足了我的要求。它适用于 Chrome/Firefox，但在 Safari 7.1+ 中根本不起作用(甚至部分不起作用)。有人可以解释一下吗？

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>

Answer 1

将你的CSS改成这样:

.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);
}

添加的 -webkit- 应该可以解决问题。

或者，更新您的 Safari - 您运行的可能是过时的版本。

---

阅读 box-shadow 及其浏览器兼容性:box-shadow - MDN Docs