В ios 10.3 нет анимации - PullRequest
Новая
       13

В ios 10.3 нет анимации

0 голосов
/ 07 января 2019

Все отлично работает, кроме iOS 10.3, но iOS 10.3 не работает с css. Когда кнопка нажата, ползунок выходит из правой части экрана в правую часть экрана.

Я уже присвоил элементу видимость: видимый атрибут, изменил преобразование на 3d, изменил все viewPorts на px и добавил несколько метатегов.

Я думал, что это была ошибка окна просмотра на iOS, поэтому я выглядел очень много. Однако элемент .-- show не отображается вообще. Если у вас есть подобный опыт, я буду просить вашего совета. Спасибо. 

<div className={ 
    classNames( "forSliderBackground", { 'forSliderBackground --show': 
         this.state.siderVisible }) } 
    onClick={ this.onClickDrawer } >
</div>

<div className={ classNames( "sider-content", { 'sider-content --show': this.state.siderVisible }) }>

{ header } //This is just a component.




.igo-navigation-sider {
    display: block;
    flex: none !important;
    position: relative;
    z-index: 10;
    .forSliderBackground {
        width: 100%;
        height: 100%;
        background: #0b0c0c;
        opacity: 0;
        position: fixed;
        top: 0px;
        -webkit-transform: translateX( 100vw );
        -webkit-transition: opacity .5s ease;
        transform: translateX( 100vw );
        transition: opacity .5s ease;
        z-index: 9;
        visibility: visible;
    }
    .sider-content {
        width: 55vw;
        height: 100vh;
        background-color: #fff;
        display: block;
        overflow: scroll;
        position: fixed;
        scroll-behavior: smooth;
        top: 0px;
        -webkit-transform: translateX( 100vw );
        -webkit-transition: -webkit-transform .4s !important;
        transform: translateX( 100vw );
        transition: transform .4s !important;
        z-index: 10;
        visibility: visible;
    }
    .forSliderBackground.--show {
        opacity: 0.92;
        -webkit-transform: translateX( 0px );
        transform: translateX( 0px );
    }
    .sider-content.--show {
        -webkit-transform: translateX( 45vw );
        transform: translateX( 45vw );
        visibility: visible;
    }

...