Question

为什么此CodePen在Safari中不起作用？在所有聚光灯教程中，我使用了这个，因为它做了我想要的。它适用于Chrome / Firefox，但在Safari 7.1+中根本不起作用（甚至不是部分）。有人可以解释一下吗？

＆＃13;

$(document).on("mousemove", function(e){  
  $(".spotlight").css("left",e.clientX-100).css("top", e.clientY-100);
});

＆＃13;

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

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="spotlight ha"></div>

＆＃13;

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

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

只是想添加代码的snippit，以防这可能导致任何人

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

这种聚光灯效果在Safari 7.1+中无效

3 个答案: