CSS 转换导致 div 在 Safari 中重叠?

2024-01-12

为什么transform:rotateY();导致 div 仅在 Safari 中重叠?以下是一些屏幕截图,可以更好地解释...

它应该是什么样子:

它不应该是什么样子(仅出现在 Safari 中):

这是非常奇怪的行为,我已经删除了transform:rotateY();从整个代码来看,但它引起了人们对于为什么会发生这种情况的有效困惑。

这是原始程序的代码片段:

window.addEventListener('load', function() {
  var percentHeight = Math.floor(window.innerHeight / 100);
  var percentWidth = Math.floor(window.innerWidth / 100);
  initializeMessages();
  var hourHand = document.getElementById('watchHourHand');
  var minuteHand = document.getElementById('watchMinuteHand');
  var secondHand = document.getElementById('watchSecondHand');
  var markers = document.getElementById('markers');
  for (var i = 0; i != 12; i++) {
    var marker = document.createElement('div');
    marker.className = 'marker';
    markers.appendChild(marker);
    markers.appendChild(marker);
  }
  window.setInterval(function() {
    //minute degrees = 6
    //second degrees = 6
    //hour degrees = 30
    var date = new Date();
    var hours = date.getHours();
    if (hours > 12) {
      hours = hours - 12;
    }
    if (hours == 0) {
      hours = 12;
    }
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    var secondDegrees = seconds * 6;
    var minuteDegrees = minutes * 6 + seconds / 60;
    var hourDegrees = hours * 30 + minutes / 60;
    if (hourDegrees == 0) {
      //hourHand.className = 'noTransition';
      hourDegrees = 360;
    }
    hourHand.style.oTransform = 'rotate(' + hourDegrees + 'deg)';
    hourHand.style.mozTransform = 'rotate(' + hourDegrees + 'deg)';
    hourHand.style.webkitTransform = 'rotate(' + hourDegrees + 'deg)';
    hourHand.style.msTransform = 'rotate(' + hourDegrees + 'deg)';
    hourHand.style.transform = 'rotate(' + hourDegrees + 'deg)';
    if (hourDegrees == 360) {
      hourHand.style.oTransform = 'rotate(0deg)';
      hourHand.style.mozTransform = 'rotate(0deg)';
      hourHand.style.webkitTransform = 'rotate(0deg)';
      hourHand.style.msTransform = 'rotate(0deg)';
      hourHand.style.transform = 'rotate(0deg)';
      hourHand.className = 'noTransition';
    }
    if (minuteDegrees == 0) {
      //minuteHand.className = 'noTransition';
      minuteDegrees = 360;
    }
    minuteHand.style.oTransform = 'rotate(' + minuteDegrees + 'deg)';
    minuteHand.style.mozTransform = 'rotate(' + minuteDegrees + 'deg)';
    minuteHand.style.webkitTransform = 'rotate(' + minuteDegrees + 'deg)';
    minuteHand.style.msTransform = 'rotate(' + minuteDegrees + 'deg)';
    minuteHand.style.transform = 'rotate(' + minuteDegrees + 'deg)';
    if (minuteDegrees == 360) {
      minuteHand.style.oTransform = 'rotate(0deg)';
      minuteHand.style.mozTransform = 'rotate(0deg)';
      minuteHand.style.webkitTransform = 'rotate(0deg)';
      minuteHand.style.msTransform = 'rotate(0deg)';
      minuteHand.style.transform = 'rotate(0deg)';
      minuteHand.className = 'noTransition';
    }
    if (secondDegrees == 0) {
      //secondHand.className = 'noTransition';
      secondDegrees = 360;
    }
    secondHand.style.oTransform = 'rotate(' + secondDegrees + 'deg)';
    secondHand.style.webkitTransform = 'rotate(' + secondDegrees + 'deg)';
    secondHand.style.msTransform = 'rotate(' + secondDegrees + 'deg)';
    secondHand.style.mozTransform = 'rotate(' + secondDegrees + 'deg)';
    secondHand.style.transform = 'rotate(' + secondDegrees + 'deg)';
    if (secondDegrees == 360) {
      secondHand.style.oTransform = 'rotate(360deg)';
      secondHand.style.webkitTransform = 'rotate(360deg)';
      secondHand.style.msTransform = 'rotate(360deg)';
      secondHand.style.mozTransform = 'rotate(360deg)';
      secondHand.style.transform = 'rotate(360deg)';
      window.setTimeout(function() {
        secondHand.className = 'noTransition';
      }, 1000)
    }
    window.setTimeout(function() {
      secondHand.className = '';
      minuteHand.style.className = '';
      hourHand.style.className = '';
    }, 500);
  }, 1000);

  function initializeMessages() {
    var messages = ['Modern 12 hour time invented <span class="hyphen">-</span> 2000 BC (Egyptians)', 'Sundial <span class="hyphen">-</span> 1500 BC (Egyptians)', 'Candle clock <span class="hyphen">-</span> 520 AD (Chinese)', 'Salisbury cathedral clock <span class="hyphen">-</span> 1386 AD Europe', 'Pendulum clock <span class="hyphen">-</span> 1580 AD France', 'Pocket watch <span class="hyphen">-</span> 1675 AD England', 'Wristwatch <span class="hyphen">-</span> 1571 AD England', 'Electric clock <span class="hyphen">-</span> 1814 AD London England'];
    var fontSizes = [18, 28, 36, 40, 44, 48, 52];
    var messageSource = document.getElementById('messages');
    for (var i = 0; i != messages.length; i++) {
      var messageDiv = document.createElement('div');
      messageDiv.className = 'message';
      messageDiv.style.fontSize = fontSizes[Math.floor(Math.random() * fontSizes.length)] + 'px';
      messageDiv.innerHTML = messages[i];
      messageSource.appendChild(messageDiv);
    }
  }
  window.setInterval(function() {
    var messages = document.getElementsByClassName('message');
    var randomMessage = messages[Math.floor(Math.random() * messages.length)];
    randomMessage.style.display = 'block';
    randomMessage.style.opacity = '1';

    randomMessagePercentHeight = randomMessage.clientHeight / percentHeight;
    randomMessagePercentWidth = randomMessage.clientWidth / percentWidth;

    randomMessage.style.left = Math.floor(Math.random() * (100 - randomMessagePercentWidth)) + 'vw';
    randomMessage.style.top = Math.floor(Math.random() * (100 - randomMessagePercentHeight)) + 'vh';
  }, 2000);
  var messages = document.getElementsByClassName('message');
  window.setInterval(function() {
    var randomMessage = messages[Math.floor(Math.random() * messages.length)];
    randomMessage.style.opacity = '0';
  }, messages.length * 500);
  window.addEventListener('resize', function() {
    percentHeight = Math.floor(window.innerHeight / 100);
    percentWidth = Math.floor(window.innerWidth / 100);
  });
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
 html,
body {
  margin: 0;
  padding: 0;
}
@-o-keyframes pageBackground {
  0% {
    background-color: #091321;
  }
  25% {
    background-color: #3C1217;
  }
  50% {
    background-color: #16310D;
  }
  75% {
    background-color: #3A1831;
  }
}
@-moz-keyframes pageBackground {
  0% {
    background-color: #091321;
  }
  25% {
    background-color: #3C1217;
  }
  50% {
    background-color: #16310D;
  }
  75% {
    background-color: #3A1831;
  }
}
@-webkit-keyframes pageBackground {
  0% {
    background-color: #091321;
  }
  25% {
    background-color: #3C1217;
  }
  50% {
    background-color: #16310D;
  }
  75% {
    background-color: #3A1831;
  }
}
@-ms-keyframes pageBackground {
  0% {
    background-color: #091321;
  }
  25% {
    background-color: #3C1217;
  }
  50% {
    background-color: #16310D;
  }
  75% {
    background-color: #3A1831;
  }
}
@keyframes pageBackground {
  0% {
    background-color: #091321;
  }
  25% {
    background-color: #3C1217;
  }
  50% {
    background-color: #16310D;
  }
  75% {
    background-color: #3A1831;
  }
}
#projectContainer {
  background-color: #091321;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -o-animation: pageBackground 20s infinite;
  -o-animation-fill-mode: forwards;
  -moz-animation: pageBackground 20s infinite;
  -moz-animation-fill-mode: forwards;
  -moz-animation: pageBackground 20s infinite;
  -webkit-animation-fill-mode: forwards;
  -ms-animation: pageBackground 20s infinite;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation: pageBackground 20s infinite;
  animation-fill-mode: forwards;
}
#verticalAlign {
  -o-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  position: absolute;
  top: 50%;
  width: 100%;
  overflow: visible;
}
#watchBeltContainer {
  height: 75vh;
  width: 100%;
  position: absolute;
  z-index: -1;
  bottom: -12.5vh;
}
#watchBelt {
  width: 50%;
  margin: auto;
  height: 100%;
  background: #555;
  border-radius: 50px;
  box-shadow: 0px -10px 3px #444;
  transform: rotateY(20deg);
}
#glass {
  width: 100%;
  height: 70%;
  position: absolute;
  background-color: #aaa;
  opacity: .5;
  z-index: 1000000000000000;
  /*left:15%;*/
  border-radius: 50%;
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 30%;
  -webkit-filter: blur(20px);
  -o-filter: blur(20px);
  -moz-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
}
#watchContainer {
  display: table;
  margin: auto;
  width: 50vh;
  height: 50vh;
  position: relative;
  border-radius: 50%;
  padding: 2vh;
  /*background-color:#AB9883;*/
  background-color: #333;
  border: 1px solid #444;
  overflow: visible;
}
#watchStructure {
  width: 100%;
  height: 100%;
  display: table-cell;
}
#watchFace {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /*background: -ms-linear-gradient(-35deg, #444, #eee);
		  background: -moz-linear-gradient(-35deg, #444, #eee);
		  background: -webkit-linear-gradient(-35deg, #444, #eee);
		  background: -o-linear-gradient(-35deg, #444, #eee);
		  background: linear-gradient(-35deg, #444, #999);
		  position:relative;*/
  /*background-color:#0E1021;*/
  background-color: #ddd;
  position: relative;
  box-shadow: inset 0 0 5px #333;
}
#watchHourHand {
  height: 30%;
  width: 3%;
  background-color: #333;
  position: absolute;
  left: 48.5%;
  top: 20%;
  -o-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
}
#watchMinuteHand {
  width: 3%;
  height: 50%;
  background-color: #333;
  position: absolute;
  left: 48.5%;
  -o-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
}
#watchSecondHand {
  width: 1%;
  height: 50%;
  background-color: #333;
  position: absolute;
  left: 49%;
  -o-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
}
#watchHandButton {
  width: 4%;
  height: 4%;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  left: 48%;
  top: 48%;
  z-index: 100000;
}
#markers {
  width: 100%;
  height: 100%;
  position: absolute;
}
.marker {
  position: absolute;
  background-color: #82715E;
}
/*marker positioning*/

.marker {
  width: 3%;
  height: 8%;
}
.marker:nth-child(1) {
  left: 48.5%;
}
.marker:nth-child(2) {
  left: 72%;
  top: 6.5%;
  -o-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.marker:nth-child(3) {
  left: 88.5%;
  top: 23%;
  -o-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
}
.marker:nth-child(4) {
  left: 92%;
  top: 48.5%;
  width: 8%;
  height: 3%;
}
.marker:nth-child(5) {
  top: 69%;
  left: 88.5%;
  -o-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.marker:nth-child(6) {
  top: 85.5%;
  left: 72%;
  -o-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.marker:nth-child(7) {
  top: 92%;
  left: 48.5%;
}
.marker:nth-child(8) {
  top: 85.5%;
  left: 26%;
  -o-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.marker:nth-child(9) {
  top: 69%;
  left: 8.5%;
  -o-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.marker:nth-child(10) {
  top: 48.5%;
  width: 8%;
  height: 3%;
}
.marker:nth-child(11) {
  top: 23%;
  left: 8.5%;
  -o-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.marker:nth-child(12) {
  top: 6%;
  left: 26%;
  -o-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
/*end marker positioning*/

.message {
  font-family: 'Open Sans', sans-serif;
  /*color:#555;*/
  color: #444;
  /*-webkit-text-stroke: 1px #555;*/
  /*text-shadow:
   			-.5px -.5px 0 #333,  
    		.5px -.5px 0 #333,
    		-.5px .5px 0 #333,
     		.5px .5px 0 #333;*/
  /*text-shadow:-2px -2px 2px #555;*/
  white-space: nowrap;
  position: absolute;
  -o-transition: all 10s ease, opacity 2s ease, display 0s ease;
  -moz-transition: all 10s ease, opacity 2s ease, display 0s ease;
  -webkit-transition: all 10s ease, opacity 2s ease, display 0s ease;
  -ms-transition: all 10s ease, opacity 2s ease, display 0s ease;
  transition: all 10s ease, opacity 2s ease, display 0s ease;
  margin: 0;
  left: 0;
  top: 0;
  opacity: 0;
  display: none;
  background-color: rgba(0, 0, 0, .05);
  padding: 2%;
  border-radius: 8px;
}
* {
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-backface-visibility: hidden;
  /*overflow:hidden;*/
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  background-color: transparent;
}
.noTransition {
  -o-transition: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
  -o-animation-direction: reverse;
  -moz-animation-direction: reverse;
  -webkit-animation-direction: reverse;
  -ms-animation-direction: reverse;
  animation-direction: reverse;
}
<div id="projectContainer">
  <div id="messages"></div>
  <div id="verticalAlign">
    <div id="watchContainer">
      <div id="watchStructure">
        <div id="watchFace">
          <div id="watchBeltContainer">
            <div id="watchBelt"></div>
          </div>
          <div id="glass"></div>
          <div id="markers"></div>
          <div id="watchHourHand"></div>
          <div id="watchMinuteHand"></div>
          <div id="watchSecondHand"></div>
          <div id="watchHandButton"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Safari 用户请仔细查看 #watchBelt 样式(查看代码片段中 CSS 代码块顶部也与 #watchBelt 相关的代码)。这是#watchBelt 代码:

#watchBelt {
      width: 50%;
      margin: auto;
      height: 100%;
      background: #555;
      border-radius: 50px;
      box-shadow: 0px -10px 3px #444;
      transform: rotateY(20deg);
    }

我还没有在 IE 或 Edge 中对此进行测试,如果有人能告诉我 IE 和/或 Edge 中发生了什么,我将不胜感激。谢谢 :)


在 Safari 中,z 值似乎参与确定哪个对象在前面渲染。确保要在前景渲染的对象具有更高的 z 值应该可以解决问题:

.yourForegroundClass {
   /* Your Style */
   transform: translateZ(999999px);
}

这显然不是最干净的解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 转换导致 div 在 Safari 中重叠? 的相关文章

随机推荐

  • 以编程方式编码应用程序后启动屏幕

    我一直在以编程方式编写一个应用程序 突然决定在启动屏幕上做一些工作 自从创建项目文件以来我就没有碰过它 并且我尝试添加 UILabel 文本以及 UIImageView 两者分别与约束 但是我似乎无法让 LaunchScreen 在模拟器上
  • 如何使用 AngularJS 影响 HTML 渲染优先级?

    我通过 PhantomJS 通过 Selenium 为搜索引擎机器人预渲染 HTML 页面 以便他们可以看到完全加载的内容 目前 在 PhantomJS 到达页面后 我等待 5 秒钟 以便确定所有内容都已加载 我考虑的一个解决方案是等到属性
  • Tesseract OCR 无法检测数字

    我正在尝试用 python 中的 tesseract 检测一些数字 下面您将看到我的起始图像以及我可以将其简化为的内容 这是我用来获取它的代码 import pytesseract import cv2 import numpy as np
  • 如何在后台线程中运行无限循环并重新启动它[重复]

    这个问题在这里已经有答案了 我想创建一个带有无限 while 循环的线程 在启动该线程一段时间后 我的要求是重新启动该线程 我不知道该怎么做 Example Thread th new Thread gt while true some o
  • Firestore 事务多次触发导致数据错误

    所以我有一个云函数 每次喜欢 不喜欢交易时都会触发该函数 该函数增加 减少点赞数 我使用 firestore 事务来实现相同的目的 我认为问题是事务块内的代码被执行多次 根据文档这可能是正确的 但我的点赞数在某些时候更新不正确 return
  • IBrokers - 如何发送 100000 至 IBrokers:::.placeOrder?

    我正在使用 IBrokers 在 IDEALPRO 上开立澳元兑美元订单 以下语法对我卖出 90 000 件很有效 myscript r libPaths rpackages library IBrokers myconid 3 twsob
  • 如何检查核心数据是否为空

    如何使用 Swift 检查核心数据是否为空 我尝试了这个方法 var people NSManagedObject if people nil 但这会导致此错误 二元运算符 不能应用于 NSManagedObject 和 nil 类型的操作
  • 查找对象数组中属性的最大值[重复]

    这个问题在这里已经有答案了 在 Java 程序中 我有一个 WaterBody 类 其中一个属性是电力输出的双精度值 如何找到数组中的最大电功率输出值WaterBody实例 这是我的原型 public static WaterBody mo
  • 如何在 webview 中加载 html 字符串?

    我有一个包含以下内容的 html 字符串
  • 使用 ADB 跟踪应用程序的网络统计信息 (netstats)

    我感觉这是可能的 我只是不太确定信息保存在哪里 我想获取特定应用程序的上 下统计信息 但我想使用 ADB 而不是wireshark 或 netty 来完成此操作 我知道我可以使用查看 vmData adb shell cd proc cd
  • 有没有办法让

    只是想知道是否有办法获取 HTML
  • 应用程序关闭时的任务处理

    我有一个 Net v4 0 Windows 服务应用程序 它在开始时旋转 tpl 任务 执行某些长时间运行的活动 并且基本上在应用程序的生命周期内保持活动状态 因此是使用 TaskCreationOptions 创建的 长跑参数值 每当服务
  • XAMPP 或 WAMP 服务器与 IIS 之间有什么区别?

    我想知道 XAMPP 或 WAMP 服务器与 IIS 服务器之间的主要区别是什么 WAMP 是 的缩写W窗口 操作系统 Apache 网络服务器 MmySQL 数据库 PHP 语言 XAMPP 和 WampServer 都是 WAMP 的免
  • Ionic 4 Ios 构建出现黑屏

    我正进入 状态Failed to load resource The requested URL was not found on this server 在 iOS 模拟和设备中运行应用程序时出错 在 Android 中运行正常 I ha
  • Firestore 通过数组的字段值进行查询

    我正在尝试运行一个简单的查询 在其中搜索包含对象数组内的值的文档 例如 看看我的数据库结构 我想运行与此类似的查询 db collection identites where partyMembers array contains name
  • 向 Objective-C 添加“forCount”控制结构的最佳方法?

    Adam Ko 为这个问题提供了一个很好的解决方案 感谢 Adam Ko 顺便说一句 如果您像我一样喜欢 c 预处理器 处理 defines 的东西 您可能不知道 XCode 中有一个方便的东西 右键单击您的一个开源文件的主体 然后向下靠近
  • Vertex AI - 部署的模型预测与评估结果的预测不同

    我使用 AutoML 训练了一个多标签文本分类模型 然后 我部署了模型并尝试测试我们在模型注册表的评估选项卡中提供的一些输入 我遇到的问题是 我通过两种测试方法获得的预测输出值与模型注册表的评估选项卡中显示的输出值不匹配 我已经包含了一个此
  • 使用 LINQ 在 ASP.NET MVC 中传递数据 - 疯狂

    首先请允许我说 我是 ASP NET MVC 方面的高手 我喜欢它 但我是个n00b 我正在尝试从 LINQ 查询传回 复杂 数据 我了解如何使用数据上下文 然后在发送回数据时强制转换该数据 但是当我执行返回匿名类型的更复杂的 LINQ 查
  • 关于 PermissionEx (WIX) 的问题

    我是 WIX 新手 我正在使用 util PermissionEx 创建 ACL 我可以成功设置读 写 读和执行等权限 但找不到有关设置修改权限的任何信息 我尝试使用 Append 属性来实现此功能 这似乎是唯一可以实现所需功能的属性 但是
  • CSS 转换导致 div 在 Safari 中重叠?

    为什么transform rotateY 导致 div 仅在 Safari 中重叠 以下是一些屏幕截图 可以更好地解释 它应该是什么样子 它不应该是什么样子 仅出现在 Safari 中 这是非常奇怪的行为 我已经删除了transform r