这个聚光灯效果在Safari 7.1+中不工作

This spotlight effect is not working in Safari 7.1+

本文关键字：工作 Safari 聚光灯      更新时间：2023-09-26

为什么这个CodePen不能在Safari中工作?在所有的聚光灯教程中，我使用这一个，因为它做了我想要的。它可以在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>

修改你的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

事实证明，为了解决手头的问题，我不得不将框阴影中的"传播"更改为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;
}

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

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
相关文章：