溢出隐藏与过渡元素有奇怪的行为

Question

当我遇到一个奇怪的是

时，我正在玩jsfiddle

注意：全屏运行代码段（尚未响应）

$('.box').click(function () {
    $('.box').toggleClass("init");
});

html {
     margin:0;
     padding:0;
     height:100vh;
     background:#222;
     color: cornflowerblue;
     overflow-x:hidden;
     font-size:18px;
 }
 .box {
     height:100px;
     width:100px;
     background:rgba(0, 0, 0, 0.2);
     position:absolute;
     top:50%;
     left:50%;
     border-radius:50%;
     overflow:hidden;
     display:inline-block;
     transition:all 1.4s 1.4s;
 }
 .minibox {
     height:48%;
     width:48%;
     position:absolute;
     background:gray;
     transition:all 0.8s;
 }
 .box:hover .minibox {
     transform:rotate(45deg);
 }
 .mini1 {
     top:0;
     left:0;
 }
 .mini2 {
     top:0;
     right:0;
 }
 .mini3 {
     bottom:0;
     left:0;
 }
 .mini4 {
     bottom:0;
     right:0;
 }
 .circ {
     position:absolute;
     height:80%;
     width:80%;
     top:10%;
     left:10%;
     border-radius:50%;
     background:black;
     line-height:80px;
     text-align:center;
 }
 .box2 {
     top:38%;
     left:40%;
     transition:all 0.8s 2s;
 }
 .box3 {
     top:38%;
     left:60%;
     transition:all 0.8s 1.2s;
 }
 .box5 {
     top:38%;
     left:20%;
     transition:all 0.8s 1.8s;
 }
 .box4 {
     top:50%;
     left:30%;
     transition:all 0.8s 1.6s;
 }
 .box6 {
     top:25%;
     left:50%;
     transition:all 0.8s 1s;
 }
 .box7 {
     top:25%;
     left:30%;
 }
 .init {
     top:0;
     left:0;
     transition:all 0.5s
 }
 .init:before {
     content:"Menu";
     text-align:center;
     line-height:80px;
     background:red;
     position:absolute;
     z-index:8;
     height:80%;
     width:80%;
     border-radius:50%;
     top:10%;
     left:10%;
     background:blue;
 }
 .box:hover .minibox {
     background:red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">4</div>
</div>
<div class="box box2 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">7</div>
</div>
<div class="box box3 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">3</div>
</div>
<div class="box box4 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">5</div>
</div>
<div class="box box5 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">6</div>
</div>
<div class="box box6 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">2</div>
</div>
<div class="box box7 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">1</div>
</div>

---

在父'box'div上设置的溢出不包含'minibox'divs - 即使我已将overflow设置为隐藏在父级上。

问题出现在：

 .minibox {
     height:48%;
     width:48%;
     position:absolute;
     background:gray;
     transition:all 0.8s; <--this declaration
 }

删除这一行会使它“正常工作”（显然没有我正在寻找的漂亮转换），虽然我为什么会有轻微的损失。

在悬停时，div元素在“做它应该做的事情”之前显示为“正方形”大约一秒钟 - 也就是说，然后是圆圈。

当它看起来像：

过渡。

有关如何解决这种溢出问题的想法吗？

Answer 1

可以使用null transform hack修复此问题。有关this question的更多信息。

$('.box').click(function () {
    $('.box').toggleClass("init");
});

html {
     margin:0;
     padding:0;
     height:100vh;
     background:#222;
     color: cornflowerblue;
     overflow-x:hidden;
     font-size:18px;
 }
 .box {
     height:100px;
     width:100px;
     background:rgba(0, 0, 0, 0.2);
     position:absolute;
     top:50%;
     left:50%;
     border-radius:50%;
     overflow:hidden;
     display:inline-block;
     transition:all 1.4s 1.4s;
     transform:translateZ(0);
 }
 .minibox {
     height:48%;
     width:48%;
     position:absolute;
     background:gray;
     transition:all 0.8s;
 }
 .box:hover .minibox {
     transform:rotate(45deg);
 }
 .mini1 {
     top:0;
     left:0;
 }
 .mini2 {
     top:0;
     right:0;
 }
 .mini3 {
     bottom:0;
     left:0;
 }
 .mini4 {
     bottom:0;
     right:0;
 }
 .circ {
     position:absolute;
     height:80%;
     width:80%;
     top:10%;
     left:10%;
     border-radius:50%;
     background:black;
     line-height:80px;
     text-align:center;
 }
 .box2 {
     top:38%;
     left:40%;
     transition:all 0.8s 2s;
 }
 .box3 {
     top:38%;
     left:60%;
     transition:all 0.8s 1.2s;
 }
 .box5 {
     top:38%;
     left:20%;
     transition:all 0.8s 1.8s;
 }
 .box4 {
     top:50%;
     left:30%;
     transition:all 0.8s 1.6s;
 }
 .box6 {
     top:25%;
     left:50%;
     transition:all 0.8s 1s;
 }
 .box7 {
     top:25%;
     left:30%;
 }
 .init {
     top:0;
     left:0;
     transition:all 0.5s
 }
 .init:before {
     content:"Menu";
     text-align:center;
     line-height:80px;
     background:red;
     position:absolute;
     z-index:8;
     height:80%;
     width:80%;
     border-radius:50%;
     top:10%;
     left:10%;
     background:blue;
 }
 .box:hover .minibox {
     background:red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">4</div>
</div>
<div class="box box2 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">7</div>
</div>
<div class="box box3 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">3</div>
</div>
<div class="box box4 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">5</div>
</div>
<div class="box box5 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">6</div>
</div>
<div class="box box6 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">2</div>
</div>
<div class="box box7 init">
    <div class="minibox mini1"></div>
    <div class="minibox mini2"></div>
    <div class="minibox mini3"></div>
    <div class="minibox mini4"></div>
    <div class="circ">1</div>
</div>