css - 在兄弟动画期间，Safari 中的旋转文本出现故障

Question

这是一个代码笔

我有这个结构

body {
  background-color: #1e1f26;
  color: #fff;
  font-size: 20px;
}

.card {
  color: white;
  width: 150px;
  background-color: lightblue;
    position: relative;
    z-index: 0;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(#000, 0.5);
    transition: box-shadow 0.3s;
 }
.card .description {
        background-color: rgba(#fff, 0.5);
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        transition: 0.3s;
        opacity: 0;
        transform: translateY(10%);
}

.card:hover .description {
    opacity: 1;
    transform: translateY(0);
}
  
.card .label {
        display: block;
        position: absolute;
        width: 100%;
        transform: rotate(-45deg);
        text-align: center;
        bottom: 15%;
        right: -30%;
        background: #f31;
  }

<div class="card">
  <div class="description">
    Lalala
  </div>
  <div class="label">
    LABEL
  </div>
</div>

标签旋转 -45 度

默认情况下有描述opacity: 0，但在悬停时会显示

这在 chrome 中工作得非常好，在 safari 标签文本中的对接在描述转换过程中会出现故障或有些模糊。

什么会导致这种情况？有解决办法吗？

标签： css