Pourquoi ce CodePen ne fonctionne-t-il pas dans Safari? De tous les tutoriels phares, j'ai couru avec celui-ci parce qu'il faisait ce que je voulais. Cela fonctionne dans Chrome / Firefox, mais ne fonctionne pas du tout (pas même partiellement) dans Safari 7.1+. Quelqu'un pourrait-il faire la lumière?

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>
3
Bardsworth 16 juil. 2015 à 19:18

3 réponses

Meilleure réponse

Il s'avère que pour résoudre le problème, j'ai dû changer le "spread" dans la zone d'ombre pour qu'il soit 1900px au lieu de 2000px. Pas du tout en forme ni en forme, pourquoi, mais cela l'a au moins corrigé sur ma version de Safari. Va vérifier la version 8 et quelques autres et j'espère que cela le corrigera.

Je voulais juste ajouter l'extrait de code au cas où cela pourrait aider quelqu'un

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

}
1
Bardsworth 18 juil. 2015 à 19:48

La clé étant que j'ai oublié d'ajouter -webkit-border-radius. Erreur stupide

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
0
Bardsworth 16 juil. 2015 à 18:09

Changez votre css en ceci:

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

Le -webkit- ajouté devrait faire l'affaire.

Vous pouvez également mettre à jour votre Safari - vous exécutez peut-être une version obsolète.


Lisez sur box-shadow et sa compatibilité avec les navigateurs: box- shadow - MDN Docs

2
Lansana Camara 16 juil. 2015 à 16:21