Я работаю в системе чата, где меня заставляют работать в определенном разделе экрана.У меня есть текстовая область, которую я прикрепил к нижней части экрана, чтобы при наборе текста я мог видеть текст, который является вопросом, а также текстовую область, на которую я набираю текст.Проблема в том, что в Chrome для iOS высота окна не меняется, когда я помещаю текстовую область в фокус.Это приводит к тому, что текст, который я набираю, будет скрыт за программной клавиатурой.
откройте эту ссылку из Chrome в iOS, чтобы понять, что я имею в виду.
https://jsfiddle.net/ten8yp0h/2/
вот структура html:
<html>
<body>
<div class="outerwrap">
<div class="chatwrap">
<div class="dialogwrap">
</div>
</div>
<div class="footer-input">
<textarea></textarea>
</div>
</div>
</body>
</html>
и вотcss:
.outerwrap {
width: 100%;
position: fixed;
top: 0;
bottom: 70px;
left: 0;
z-index: 100000;
}
.chatwrap {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
height: auto;
overflow: scroll;
border: 1px solid black;
}
.dialogwrap {
position: relative;
bottom: 5px;
display: block;
padding-right: 15px;
width: 570px;
overflow: auto;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
direction: rtl;
height: 100%;
}
.footer-input {
padding: 0;
overflow: visible;
position: fixed;
bottom: 0px;
left: 2px;
width: auto;
margin-right: 68px;
box-sizing: border-box;
}
.outerwrap textarea {
width: 300px;
background-color: white;
border: 1px solid #EEEEEE;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 66px;
padding: 0;
background-color: #FFFFFF;
}
Я часами гуглял эту тему, пытаясь найти нужную информацию, чтобы указать мне правильное направление.Меня беспокоит, что он отлично работает в Safari / iOS, Firefox / iOS, Chrome / Android и Firefox / Android.Это единственная комбинация Chrome / iOS, которая, кажется, имеет проблему.Любое направление или идеи приветствуются.Заранее спасибо.