css - Firefox 转换 : rotate breaks text color

Question

我构建了以下 CSS(来自各种来源)来创建便利贴，并在 LayerSlider 横幅动画中使用它。如果未旋转，它可以正常工作，但它会失去文本颜色或从白色闪烁以在 Firefox 中设置颜色时“变换:旋转(5 度)；”添加了选项。我已经尝试了一些在线列出的建议解决方案，但没有成功。在大多数其他浏览器中 100% 有效。

.orange {
text-align:center;
width: 350px;
margin: 15px;
min-height:175px;
max-height:175px;
padding-top:15px;
position:relative;
border:1px solid #FFDC73;
font-family:'Handlee';
font-size:22px;
border-bottom-right-radius: 60px 5px;
display:inline-block;
box-shadow: 16px 21px 21px 0px rgba(0,0,0,0.75);
background: #FFCD5A; /* Old browsers */
background: -moz-linear-gradient(-45deg, #FFCD5A 81%, #FFCD5A 82%, #FFCD5A
82%, #ffebc0 100%);
background: -webkit-gradient(linear, left top, right bottom, 
color-stop(81%,#FFCD5A), color-stop(82%,#FFCD5A), color-stop(82%,#FFCD5A),
color-stop(100%,#ffebc0)); 
background: -webkit-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
background: -o-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
background: -ms-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
background: linear-gradient(135deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 
82%,#ffebc0 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#FFCD5A', endColorstr='#ffebc0',GradientType=1 ); 
}

我用它来旋转笔记:

-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);

添加类似“translateZ(0)”的东西不会改善结果

Answer 1

我通过将 CSS 样式分成两部分解决了这个问题，一部分用于注释(所有颜色通用的样式)，第二部分用于注释的颜色选项。 LayerSlider 中的后续幻灯片现在不会丢失其文本颜色。在我第一次尝试时，Firefox 中的“在可用时使用硬件加速”选项也会影响此行为。

.note {
            text-align:center;
            width: 350px;
            margin: 15px;
            min-height:175px;
            max-height:175px;
            padding-top:15px;
            position:relative;
            font-family:'Handlee';
            color: #131304;
            font-size:22px;
            border-bottom-right-radius: 60px 5px;
            display:inline-block;
            box-shadow: 16px 21px 21px 0px rgba(0,0,0,0.75);
            -webkit-transform: translateZ(0) rotate(5deg);
            -moz-transform: translateZ(0) rotate(5deg);
            -o-transform: translateZ(0) rotate(5deg);
            -ms-transform: translateZ(0) rotate(5deg);
            transform: translateZ(0) rotate(5deg);
        }

.orange {
            border:1px solid #FFDB8D;
            background: #FFCD5A; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #FFCD5A 81%, #FFCD5A 82%, #FFCD5A 82%, #ffebc0 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#FFCD5A), color-stop(82%,#FFCD5A), color-stop(82%,#FFCD5A), color-stop(100%,#ffebc0)); 
            background: -webkit-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); 
            background: -o-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); 
            background: -ms-linear-gradient(-45deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); /* IE10+ */
            background: linear-gradient(135deg, #FFCD5A 81%,#FFCD5A 82%,#FFCD5A 82%,#ffebc0 100%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCD5A', endColorstr='#ffebc0',GradientType=1 ); 

        }