ios端 input输入框遮挡问题解决

ios端输入框遮挡问题很烦人 记录自己的解决办法

问题: 整体页面布局全都是flex 但是在ios中使用原生输入法显示正常 使用第三方输入法就会出现遮挡 

解决:获取焦点添加 父元素 transform: translateY(0%);  

原理:我不知道  developer.mozilla.org 我这里一直打不开 有空再补上好了

<div class='detail'>
    <div class='message' #message [style.height.rem]='height'>
       内容区域        
    </div>
    <div class="input-box" #input>//输入框
        <input type="text" class='input' [(ngModel)]='inputContent' (focus)='inputFocus()' (blur)='inputBlur()'>
        <div class="btn">发送</div>
    </div>
</div>

:host {
  flex: 1;
}

.detail {
  height: 100%;
  display: flex;
  flex-direction: column;
 
........ 

 .input-box {
    height: 1.3rem;
    &.move {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
    }
    .input {
     ...
    }
    .btn {
      ....
    }
  }
}

}

/**
     * 失去焦点  失去焦点添加样式  
     */
    inputBlur() {

        if (Utils.isFromiOS()) {
            console.log(222);
            this.renderer.removeClass(this.input.nativeElement, 'move');
        }
    }

    /**
     * 获取焦点
     */
    inputFocus() {
        if (Utils.isFromiOS()) {
            console.log(222);
            this.renderer.addClass(this.input.nativeElement, 'move');
        }
    }