크롬 모바일에 양식 데이터를 입력 할 수 없습니다.

Question

세 부분으로 된 화면 하단에 양식이있는 모바일 우선 웹 앱 (Ruby on Rails 3/Zurb Foundation 5)을 작성 중입니다 :

• 파일 업로드 버튼
• 텍스트 입력 필드
• 버튼을 제출

구글 크롬을 사용하는 경우 나 텍스트 입력 필드를 사용하려고 할 때, 나는 버그가 발생.

• iOS에서는 가상 키보드가 튀어 나오지만 아무 것도 입력하지 않습니다. 사용자가 필드를 두 번 클릭해야 포커스를받을 수 있습니다.
• 안드로이드에서는 더 나빠집니다. 클릭 후 키보드가 튀어 나오고 다시 슬라이드됩니다. 그 사이에 커서는 텍스트 필드에서 깜박입니다.

여기 코드는 어떤 도움을 주시면 감사하겠습니다.

<form accept-charset="UTF-8" action="/posts" class="new_post" enctype="multipart/form-data" id="new_post" method="post"> 
    <div style="margin:0;padding:0;display:inline"> 
     <input name="utf8" type="hidden" value="&#x2713;" /> 
     <input name="authenticity_token" type="hidden" value="i9+Pjr1hPjTH8/MzPI0Y4+o0qYvS+C/GJcOR5wht7nQ=" /> 
    </div> 
    <div class="row collapse action"> 
     <div class="small-2 columns"> 
      <input id="post_pic" name="post[pic]" type="file" /> 
     </div> 
     <div class="small-8 columns"> 
      <input id="post_message" name="post[message]" placeholder="What&#x27;s going on?" size="30" type="text" /> 
     </div> 
     <div class="small-2 columns"> 
      <input class="postfix radius button action-post" name="commit" type="submit" value="Post" /> 
     </div> 
    </div> 

</form> 

편집 : 문제를 일으키는 CSS 클래스를 찾았지만, 아직 문제를 해결하는 방법을 모른다 :

.action { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: #fff; 
    padding-top: 20px; 
} 

Answer 1

크롬 모바일의 가상 키보드는 가능성이 양식 항목의 위치와 충돌 고정되어 바닥에 플러시됩니다.

요소를 바닥으로 플러시 할 때 버그가있는 동작을 나타내는 많은 스레드가 있습니다. 양식을 다른 곳으로 옮겨야합니다.