Safari не любит размеры выше 5em?

Question

Я не совсем уверен, как это объяснить, я сделал своего рода зависание, открыв частичную вещь, ИЛИ прожектор, Он отлично работает во всех браузерах, но в сафари v11.0.3 По какой-то причине он не работает правильно.

Но если бы я изменил это:

  &:hover > #observe
    width: 10em
    height: 10em  

на

  &:hover > #observe
    width: 5em
    height: 5em 

Он прекрасно работает во всех браузерах, кроме сафари, и я не понимаю, почему.

У кого-нибудь есть идеи?Кто-нибудь видит что-нибудь, что я, возможно, сделал неправильно?

Ссылка Codepen: https://codepen.io/Archtects/pen/YOYerq

var clicked = 1;
$(document).bind('mousemove', function(e){
    if (clicked == 1) {
      $('#observe').css({ left:  e.pageX - 80, top:   e.pageY - 80 });
    }
    $('#wrapper').click(function(){
        $("#observe").addClass("clicked");
        clicked = 2;
    });
});

* {
  padding: 0;
  margin: 0;
}

#wrapper {
  width: 100%;
  height: 100vh;
  background: url("https://www.splitshire.com/wp-content/uploads/2018/07/SplitShire-01281.jpg") no-repeat 50%;
  background-size: 100%;
  position: relative;
  overflow: hidden;
}
#wrapper:hover > #observe {
  width: 10em;
  height: 10em;
}

#info {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #2d2d2d;
}

#observe {
  cursor: pointer;
  width: 0em;
  height: 0em;
  position: absolute;
  box-shadow: 0 0 0 2000px #000;
  z-index: 5;
  border-radius: 50%;
}

.clicked {
  width: 5000px !important;
  height: 5000px !important;
  transition: 0.48s ease-in-out;
  pointer-events: none;
  transform: translateX(-50%);
  margin-top: -50%;
}

p {
  color: white;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22;
  font-size: 3em;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <p>take a peak</p>
  <div id="observe"></div>
</div>
<div id="info">
  <p>no peaking here</p>
</div>

Answer 1

Это старый. Но я исправил это. сейчас работает на сафари. Я до сих пор не знаю, почему сафари не понравился размер выше 5em?

кодовая ссылка: https://codepen.io/Archtects/pen/rZqNrp

var clicked = 'false';
$(document).bind('mousemove', function(e){
    if (clicked == 'false') {
      $('#observe').css({ left:  e.pageX - 100, top:   e.pageY - 100 });
    }
    $('#wrapper').click(function(){
        $("#observe").addClass("clicked");
        clicked = 'true';
    });
});

* {
  padding: 0;
  margin: 0 auto;
  overflow-x: hidden;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: url("https://www.splitshire.com/wp-content/uploads/2018/07/SplitShire-01281.jpg") no-repeat 50%;
  background-size: 100%;
}
#wrapper:hover > #observe {
  height: 200px;
  width: 200px;
}

#observe {
  background: transparent;
  width: 0px;
  height: 0px;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 0px 101.4vw #111;
}

.clicked {
  box-shadow: 0px 0px 0px 0vw #111 !important;
  transition: all 0.48s ease-in-out;
  pointer-events: none;
}

#info {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #2d2d2d;
}

p {
  color: white;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22;
  font-size: 3em;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <p>take a peak</p>
  <div id="observe"></div>
</div>
<div id="info">
  <p>no peaking here</p>
</div>