jquery - Safari 不喜欢 5em 以上的尺寸？

Question

我不确定如何解释这一点，我做了一种悬停显示部分事情，或聚光灯，它在所有浏览器上都可以正常工作，但在 safari 上v11.0.3由于某种原因它不能正常工作。

但如果我要改变这个：

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

到

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

它在除 safari 之外的所有浏览器上都运行良好，我不明白为什么。

有人有什么想法吗？有人看到我可能做错了什么吗？

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>

标签： jqueryhtmlcsssasssafari

Answer 1

这是旧的。但我修好了。它现在适用于野生动物园。我仍然不知道为什么 safari 不喜欢 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>