2

我刚刚注意到一个奇怪的错误，我可以在JSFiddle上复制。

我为复选框使用了自定义设计，并且我的 V 图标在点击时被动画transform: scale(0)化transform: scale(1)。没有什么太疯狂了。

当我在另一个具有transform属性的元素中放置一个复选框时，问题就开始了。我在示例中使用 iziModal 库来演示它。

全屏打开结果页面并尝试按照以下步骤查看确切的问题：

  1. 触发模态。复选框似乎没有任何问题。
  2. 切换模式的滚动条（使用下面的单选按钮）。这会#modal-content非常高。
  3. 触发模态。您现在可以看到 V 图标在过渡期间不在正确位置。
  4. 现在应用-webkit-backface-visibility: hidden;第二个单选按钮组。
  5. 触发模态。您现在可以看到复选框本身在过渡期间发生了偏移。

笔记：

  • -webkit-backface-visibility: hidden;在其他元素input[type=checkbox]上似乎没有改变任何东西。
  • 问题仅在bodyis时发生direction: rtl;。

$(function() {

  $("#modal").iziModal();

  $("#button").click(function() {
    $("#modal").iziModal('open');
  });

  $(".modal-close").click(function() {
    $("#modal").iziModal('close');
  });

  $("input[name=scr]").on('change', function() {
    if ($(this).val() == 'true')
      $("body").addClass('scrollbar');
    else
      $("body").removeClass('scrollbar');
  });

  $("input[name=wbv]").on('change', function() {
    if ($(this).val() == 'true')
      $("body").addClass('with-wbv');
    else
      $("body").removeClass('with-wbv');
  });

})
body.with-wbv input[type=checkbox] {
  -webkit-backface-visibility: hidden;
}

body.scrollbar #modal-content {
  height: 2000px;
}

#modal #modal-content {
  background: rgba(0, 0, 0, 0.05);
  border: 2px dashed rgba(0, 0, 0, 0.15);
  margin: 1em;
  padding: 1em;
}

input[type=checkbox] {
  position: relative;
  border: 0;
  margin: .5em;
  -webkit-appearance: none;
  border-radius: 2px;
  vertical-align: middle;
}

input[type=checkbox]:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  display: table;
  width: 4px;
  height: 9px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  transition: 240ms;
  transform: rotate(45deg) scale(0) translateZ(0);
}

input[type=checkbox]:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  transition: 240ms;
  box-shadow: inset 0 0 0 0 #08c1c6;
}

input[type=checkbox]:checked:before {
  transform: rotate(45deg) scale(1) translateZ(0);
  transition-delay: .05s;
}

input[type=checkbox]:checked:after {
  border-color: #08c1c6;
  box-shadow: inset 0 0 0 8px #08c1c6;
}

#explain {
  direction: ltr;
}

#explain pre {
  display: inline-block;
  margin: 0;
}

#explain div {
  margin: 2em 0;
}

#explain h5 {
  margin: .5em;
}

#explain label {
  font-size: .8em;
}

#explain label input {
  vertical-align: -10%;
}

#explain label~label input {
  margin-left: 1em;
}

#explain li {
  margin-bottom: 1em;
}

#explain li:first-letter {
  text-transform: capitalize;
}

#button {
  padding: .75em 1.5em;
  background: #08c1c6;
  color: white;
  display: inline-flex;
  border-radius: 5em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75em;
  box-shadow: 0 5px 20px rgba(8, 193, 198, 0.25);
  cursor: pointer;
  margin: 1em;
}

.modal-close {
  padding: .75em 1.5em;
  background: #d95753;
  color: white;
  display: inline-flex;
  border-radius: 5em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75em;
  box-shadow: 0 5px 20px rgba(217, 87, 83, 0.25);
  cursor: pointer;
  margin: 1em;
}

html,
body {
  height: 100%;
}

body {
  font-family: Arial;
  direction: rtl;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="explain">

  <h1>A problem with RTL-directioned body</h1>

  <h4>steps:</h4>
  <ol>
    <li>trigger the modal. nothing seems to be wrong with the checkboxes.</li>
    <li>toggle the scrollbar of the modal (with the radio buttons below). this will make
      <pre>#modal-content</pre> really high.</li>
    <li>trigger the modal. you can now see the V icon is not at its correct position during the transition.
      <li>now apply
        <pre>-webkit-backface-visibility: hidden;</pre> with the second radio button group.</li>
      <li>trigger the modal. you can now see that the checkboxes themselves are offsetted during the transition.</li>
  </ol>

  <hr/>

  <div>
    <h5>toggle the scrollbar of the modal:</h5>
    <label>
        <input type="radio" name="scr" value="true" />apply
      </label>
    <label>
        <input checked="checked" type="radio" name="scr" value="false" />don't apply
      </label>
  </div>

  <div>
    <h5>apply
      <pre>-webkit-backface-visibility: hidden;</pre> on
      <pre>input[type=checkbox]</pre>:</h5>
    <label>
        <input type="radio" name="wbv" value="true" />apply
      </label>
    <label>
        <input checked="checked" type="radio" name="wbv" value="false" />don't apply
      </label>
  </div>

</div>


<div id="button">Trigger Modal</div>


<div id="modal">

  <div class="modal-close">Close Modal</div>

  <div id="modal-content">

    <div id="circle"></div>

    <input type="checkbox"> 1
    <br/>
    <input type="checkbox"> 2
    <br/>
    <input type="checkbox"> 3
    <br/>
    <input type="checkbox" checked="checked"> 4
    <br/>
    <input type="checkbox"> 5
    <br/>
    <input type="checkbox"> 6

  </div>

  <div class="modal-close">Close Modal</div>

</div>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js"></script>

如果您知道为什么会发生这种情况或我该如何解决，请告诉我。谢谢！

4

0 回答 0