我的字体图标在使用 Owl Carousel 更改轮播时消失

Question

基本上，我使用 :before 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。我在每个列出的轮播中都有一个按钮，它仍然可以在桌面上显示，但不能在移动设备上显示。

Onload 它使用字体图标呈现第一组按钮，但是当滑动到下一个轮播时，它显示按钮，但字体图标在幻灯片完成时消失。每次我通过滑动或单击下一个箭头更改活动轮播时，按钮箭头都会闪烁。

我用谷歌搜索了互联网，没有发现有同样问题的人。

我已经在 Android(Nexus 4) 和 iPhone(5s) 上对此进行了测试，我认为这是渲染问题，但我不知道怎么想或如何解决这个问题。

任何帮助都可以。

Answer 1

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