微信小程序外圆角过渡ios出现黑块

黄粱一梦2024-02-2511

为什么这里的flex:1;加width: 0;可以避免把前面的元素空间挤没?

css设置外圆角过渡

.active-tab-item {
					position: relative;
					background-color: #fff;
					color: var(--active-color);
				}
				
				.active-tab-item::before ,.active-tab-item::after{
				  content: "";
				  display: block;
				  height: var(--radius-size);
				  width: var(--radius-size);
				  position: absolute;
				  bottom: 0;
				  background: radial-gradient(
				    var(--radius-size) at var(--radius-size) 0px,
				    transparent var(--radius-size),
				    var(--acticity-color) var(--radius-size)
				  );
				}
				.active-tab-item::before {
				  right: 0;
				  bottom: calc(-1 * var(--radius-size));
				  transform: scale(-1);
				}
				 
				.active-tab-item::after {
				  right: 0;
				  top:calc(-1 * var(--radius-size));
				  transform: scaleX(-1);
				}

上面方案在ios真机测试时候渐变元素会出现黑块
::: danger 解决方案

出现原因 ios不支持`at`写法

background-image: -webkit-radial-gradient(var(--radius-size) 0px, rgba(255, 255, 255, 0) var(--radius-size), green var(--radius-size), red var(--radius-size), #fff var(--radius-size));