<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.modal {
position: fixed;
z-index: 1050;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: 600px;
margin: 170px auto;
}
.modal-body {
padding: 20px 30px 30px;
background-color: #f3f3f3;
}
.btn {
font-size: 24px;
line-height: 26px;
width: 100px;
position: relative;
background: #999999;
text-align: center;
overflow: hidden;
margin: auto;
display: block;
border: none;
border-radius: 3px;
color: #ffffff;
transform: rotate(0deg);
}
.btn span {
position: relative;
z-index: 2;
}
.click-effect {
position: absolute;
border-radius: 100px;
top: -62px;
left: -25px;
z-index: 1;
width: 150px;
height: 150px;
background: #BF3E3E;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-dialog">
<div class="modal-body">
<button class="btn">
<span>Ծ‸Ծ</span>
<div class="click-effect"></div>
</button>
</div>
</div>
</div>
</body>
</html>
页面链接
这个页面，当浏览器高度变小，触发到滚动条时，btn的overflow就出现问题了。
去掉.modal中的position: fixed;或者overflow-y: auto;或者.btn中的transform: rotate(0deg);就不会出现问题了，我觉得出现这神奇的现象的点还是在于这个transform: rotate(0deg); 不太懂里面的原理，求大神指点
测试没看到失效
估计是chrome的bug吧。safari下是好的。
你啥时候注册的也到这杭州本土的社区来了。