CSS - iOS 10 - css не учитывается

Question

Я хочу использовать анимацию CSS в своем приложении.

Я добавляю класс "--in" в тег для запуска transform translateX для дочернего тега ".inner".

Но в iOS 10 похоже, что он не принимает CSS с классом --in.Таким образом, анимация не запускается.

Хотя она отлично работает в iOS 11 и iOS 12.

См. Приведенные ниже снимки экрана со сравнением.

Код

.view {
    display: flex;
	  flex: 1;
	  flex-direction: row;
	  z-index: 3;
	  position: relative;
	  width:100vw;

	  > .inner {

	  	  position: relative;
	  	  display: flex;
	  	  flex: 1;
	  	  -webkit-transition: all .7s;
	  	  transition: all .7s;	
	  	  .ease-in-out-circ();
	  	  -webkit-transform: translateX(120%);
	  	  transform: translateX(120%);
	  	  padding: 0px 20px;
	  	  z-index: 2;
	  	  overflow: scroll;
    }
    
    &.--in {
	    z-index: 2;
        
		> .inner {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }
}

<section class="login-view view --welcome-state" data-controller="login-controller">
    <div class="inner">
        ...
    </div>
</section>

Снимки экрана:

iOS 10 не работает

iOS 11 работает

Любая помощь приветствуется

Спасибо

[править] Ответ: проблема заключалась в двух черточках -