Question

我构建了以下CSS（来自各种来源）来创建便利贴，并在LayerSlider横幅动画中使用它。如果未旋转，它可正常工作，但当“transform：rotate（5deg）;”时，它会丢失文本颜色或从白色闪烁以设置Firefox中的颜色选项已添加。我已经尝试了一些在线列出的建议解决方案，但没有成功。在大多数其他浏览器中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 ); 

        }

Firefox转换：旋转打破文本颜色

1 个答案: