Question

我使用swiper.js作为用于图像选择的无限轮播。每页上有一张图片。选择图像时，它会变暗，并出现复选标记。

这适用于除iOS 10 webkit之外的所有浏览器。它在iOS Chrome中也会被破坏，这是旧版本的Safari。更糟糕的是，MacOS Safari开发人员工具给我一个完全不同的结果。我完全迷失在这里。

什么可能导致复选标记不能在Safari中响应中心？

Safari -- The checkmark moves around the screen when scaled.

HTML

<div class="swiper-slide">         
              <div>
                <img class="imageselection" src="img/1.jpg">  
              </div>

              <div class="checkmark">
                <img src="img/checkmark.png">
              </div>
</div>

CSS

.checkmark {

      visibility: hidden!important;
      position: absolute!important;

    }

.checkmark.checkmarkon {

      visibility: visible!important;
      position: absolute!important;
      transition: .03s ease!important;
      opacity: 1;

    }

.imageselection {

      position: relative !important;
      margin-top: 0%!important;

    }

img.imageselection.opacity {

      opacity: 0.3;

    }

Answer 1

首先，每个对我投降的人都可以DIAGF。你们都是dicks。

其次，WebKit是倒退的。我的问题源于糟糕的Apple文档，以及缺乏一般的WebKit信息。忽略它会很棒，但是如果你想在iOS上运行一些东西，你应该从那里开始，因为其他引擎比其他方式更好地适应。

最后，答案在这里找到：https://codepen.io/shshaw/full/gEiDt

绝对是一个善良的人，有灵魂的人。

相关的代码更改如下：

.checkmark  {
visibility: hidden!important;
position: absolute!important;
margin: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto%;
display: -webkit-box !important;
display: -ms-flexbox!important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
-webkit-justify-content: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
-webkit-align-items: center!important;
align-items: center!important;

}

你希望可以忽略！重要事项:-)。我懒得编辑swiper.js和onsenui框架的核心css。

iOS Safari随机打破了嵌套的嵌套Div - 这是一个Webkit问题吗？

1 个答案: