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

Question

为什么<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>导致div只在Safari中重叠？这里有一些屏幕截图可以更好地解释......

  

应该是什么样的：

  

它不应该是什么样子（仅在Safari中出现）：

这是一种非常奇怪的行为，我已经从整个代码中删除了#watchBelt { width: 50%; margin: auto; height: 100%; background: #555; border-radius: 50px; box-shadow: 0px -10px 3px #444; transform: rotateY(20deg); } ，但它会对为什么会发生这种情况提出有效的混淆。

以下是原始程序的代码段：

apply plugin: 'com.android.application' 

android { 
  useLibrary 'org.apache.http.legacy' 
  compileSdkVersion 23 
  buildToolsVersion "23.0.0" 

  defaultConfig { 
    applicationId "com.skripsi.irwanto.paud" 
    minSdkVersion 15 
    targetSdkVersion 23 
    versionCode 1 
    versionName "1.0" 
  } 

  buildTypes { 
    release { 
      minifyEnabled false 
      proguardFiles getDefaultProauardFile('proguard-android.txt'), 'proguard-rules.pro' 
    } 
  } 
} 
dependencies { 
 compile fileTree(include: ['*.jar'], dir: 'libs') 
 testCompile 'junit:junit:4.12' 
 compile 'com.android.support:appcompat-v7:23.1.11 
} 

Warning:Unable to find optional library: org.apache.http.legacy

@testsAddQuestionController = testsQuestionsController.extend
  template: ->
    qType = Router.current().params.type
    if qType == 'practical'
      'practicalQuestionForm'
    else if qType == 'mcq'
      'mcqQuestionForm'
  data: ->
    questions: TestQuestions.find()  
    test: Tests.findOne slug: this.params.slug

Safari用户，仔细查看#watchBelt样式（在代码段的CSS代码块顶部查看与#watchBelt相关的代码）。这是#watchBelt代码：

$(document).on('change', '.disguise', $.fn.calculateHours);

我没有在IE或Edge中对此进行测试，我会感谢任何能告诉我在IE和/或Edge中发生了什么的人。谢谢:)）

Answer 1

#watchBelt {
      width: 50%;
      margin: auto;
      height: 100%;
      background: #555;
      border-radius: 50px;
      box-shadow: 0px -10px 3px #444;
      transform: rotateY(20deg);
position :relative;
z-index:-1;/*decrease it until it moves to back*/
    }

Answer 2

在 Safari 中，z 值似乎与确定哪个对象在前面呈现有关。确保您要在前景中呈现的对象具有更高的 z 值应该可以解决问题：

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

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