此聚光灯效果在 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

Answer 2

事实证明，要解决手头的问题，我必须将 box-shadow 中的“spread”更改为 1900px 而不是 2000px。没有任何形式或形式确定原因，但至少在我的 Safari 版本上修复了它。将检查版本 8 和其他一些版本，并希望修复它。

只是想添加代码片段，以防万一这会阻止任何人

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

}

Answer 3

关键是我忘了添加-webkit-border-radius。愚蠢的错误

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;