Question

基本上我使用：在sudo元素（SASS）之前设置带有附加图标的按钮

.btn {
    @include font-size-px-rem(14px); //font-size
    @include box-sizing(border-box);
    background-color: $yellow;
    font-weight: bold;
    border: 0;
    color: $black;
    cursor: pointer;
    display: inline-block;
    line-height: 14px;
    margin: 0;
    padding: 8px 26px 8px 11px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;

    white-space: nowrap;
    vertical-align: middle;

    @extend .arial; //my font

    -webkit-appearance: none;

    &:hover,
    &:hover,
    &:focus {
        color: $white;
        background-color: $light-blue;
    }

    &:before {
        @extend .icon__right-big; //font-Icon
        @include font-size-px-rem(15px); //font-size
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -8px; //vertically align icon - middle (half font height)
        z-index: 2;

    }
}

这会创建我的按钮，一切都非常完美。

挑战是使用OwlCarousel。我在每个列出的Carousel中都有一个按钮，它仍然可以在桌面上显示，但不能移动。

Onload它使用font-icons渲染第一组按钮，但是当滑动到下一个旋转木马时，它显示按钮但是幻灯片完成后字体图标消失。每次我通过滑动或单击下一个箭头来更改活动轮播时，按钮箭头会闪烁。

我在互联网上谷歌并没有发现任何人有同样的问题。

我已经在 Android（Nexus 4）和 iPhone（5s）上对此进行了测试，我认为这是一个渲染问题，但我不会＆＃39;知道该怎么想或如何解决这个问题。

任何帮助都可以。

Answer 1

评论动画元素上的overflow: hidden;，在我的情况下，如果.btn解决了它。

使用猫头鹰旋转木马，我的字体图标在旋转木马更改时消失

1 个答案: