[英]CSS border-radius/transition issues in Chrome
I'm trying to create a Material Design -esque interface that allows the user to drop colors into wells. 我正在尝试创建一个Material Design风格的界面,允许用户将颜色滴入孔中。 The DOM is structured as follows:
DOM的结构如下:
<div class="clickable well">
<div id="well-color"></div>
<div class="well-shadow"></div>
</div>
I've got the following styles defined: 我定义了以下样式:
.well {
border-radius: 50%;
width: 30px;
height: 30px;
position: relative;
overflow: hidden;
}
.well-shadow {
position: absolute;
top: -1px; bottom: -1px; left: -1px; right: -1px;
box-shadow: 0px 2px 6px inset;
pointer-events: none;
border-radius: 50%;
}
.well.clickable {
cursor: pointer;
}
#well-color {
pointer-events: none;
position: absolute;
width: 30px;
height: 30px;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(1);
background-color: white;
border-radius: 50%;
box-shadow: 0px 0px 1px 3px white;
}
#well-color.enter {
transform: translate(-50%, -50%) scale(0);
}
#well-color.entering {
transform: translate(-50%, -50%) scale(1);
transition: transform 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
I would expect the transitions to just work; 我希望过渡能够正常工作; however, it seems that in Chrome it causes the parent element to briefly have flat sides during the transition.
但是,似乎在Chrome中,它会导致父元素在过渡过程中短暂地具有平坦的一面。 This is less than ideal and counteracts the magic I was trying to introduce in the first place with the transitions.
这不是理想的,并且抵消了我最初尝试在过渡中引入的魔术。
My question has 3 parts: 我的问题分为3部分:
Edit: Just tested in Safari, and it exhibits the same flat-sides ugliness with the added bonus that it now changes size by a couple of pixels during the transition. 编辑:刚刚在Safari中进行了测试,它表现出相同的平面丑陋性,并具有额外的好处,即它现在在过渡期间将尺寸更改了几个像素。
Question is now answered here: li element backgrounds not obeying the border radius on transformations 现在在这里回答问题: li元素背景不遵循变换的边界半径
After setting a z-index to 1 on the parent and zero on the children, the browser then respects the border radius. 将父级的z-index设置为1,子级的z-index设置为零后,浏览器将遵循边界半径。
.parent {
display:block;
position:relative;
z-index:1; }
.child {
z-index:0;
transition: .3s ease-out; }
.active.child {
transform: translate(-50px,0); }
Here is a similar working example with border radius: https://codepen.io/btn-ninja/pen/vJvQEE 这是一个具有边框半径的类似工作示例: https : //codepen.io/btn-ninja/pen/vJvQEE
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.