요소가 무작위로 입력 포커스 - 사파리 IOS에서 표시되지 않습니다.

이 질문에 설명 된 것과 비슷한 시나리오가 있는데 (iOS 8.3 fixed HTML element disappears on input focus) 내 문제는 다릅니다. 화면 이동 가능한 부모 내에서 chatbox iframe이 있습니다. iframe이 열려 있으면 뷰포트 전체를 채우도록 펼칩니다.요소가 무작위로 입력 포커스 - 사파리 IOS에서 표시되지 않습니다.

<body> 
    <!-- PARENT PAGE CONTENT --> 

    <div class="webchat-container"> 
     <div class="webchat-header-container">blah blah chat</div> 

     <!-- Iframe contains a reply bar with a text input with fixed positioning to the bottom --> 
     <iframe src="chatapp"/>  
    </div> 
</body>

.webchat 컨테이너는 기본 모바일 스타일 세트가 있습니다 :

.webchat-container { 
    width: 100%; 
    height: 70px; 
    position: fixed; 
    bottom: 0; 
    z-index: 50; 
    transition: height 300ms ease-in-out; 
    -webkit-transform: translate3d(0px,0px,0px); 
    transform: translate3d(0px,0px,0px); 
}

열 때, 컨테이너는 .webchat-이 추가 스타일을 가져옵니다의 초점에

.webchat-container.open { 
    height: 100%; 
}

을 부모 자식이 포커스를 가지고 있음을 부모에게 알려주도록 iframe은 postMessage()를 사용합니다. 그래서 ios 디바이스를위한 특정 클래스를 적용하여 불행한 방법으로 고정 된 위치를 처리합니다 지.

body.no-scroll { 
    position: fixed !important; 
    top: 0; 
    bottom: 0; 
}

및 iframe을 보유하고있는 반응 용기에 클래스 : 깜박임 경우가

.webchat-container.ios-positioning.open {  
    position: absolute !important; 
    overflow: hidden; 
    top: 0 !important; 
    bottom: 0 !important; 
}

있습니다을

나는 부모의 몸에 - 안돼 스크롤 클래스를 추가 입력이 집중되었지만 그 외에는 원하는 효과가 있습니다 ... 소프트 키 보드가 위로 올라오고 응답 표시 줄이 키보드 바로 위에 있어야합니다. 채팅 위젯은 여전히 뷰포트의 100 %를 올바르게 채우고 부모 또는 이상한 확대/축소 버그를 보지 않습니다. 이 문제에 대한

그리고 지금 .... 내가 키보드를 닫고 다시 입력 초점을 수행 클릭하면

에서, .webchat 컨테이너 가끔 볼 만 깜박이는 커서 보이지 않는 될 것입니다 (이것은 요소가 여전히 거기에 있고 올바른 위치에 있음을 어떻게 알 수있는 것입니다). Safari에서 요소를 검사 할 경우 요소의 파란색 강조 표시는 정확한 위치에 있지만 보이지 않거나 투명 함을 보여줍니다. 클래스도 요소에 올바르게 적용되고 제거됩니다.

키보드를 천천히, 빠르게, 불규칙하게 닫고 재 시도하는 경우가 있습니다. 때로는 올바르게 다시 칠해 지기도하고 때로는 실 거예요. 무작위로 보인다. 또한 포커스가있는 애니메이션을 트리거하여 강제로 다시 칠을 시도했지만 ... 작동하지 않습니다. 그래서 이것이 게으른 재 초기화 문제인지 아닌지조차 알지 못합니다.

iframe에 포함 된 채팅 앱은 프런트 엔드에서 반응하고 백엔드에서 C# & asp.net입니다.

이 간헐적 인 요소를 보이지 않게하는 원인이 무엇인지 알면 누구나이 문제를 해결하는 방법에 대한 아이디어를 얻을 수 있습니다. 감사하게 생각합니다. IOS와 그 다양한 이별은 내 머리카락을 날려 버렸고, 이것이 아직 해결할 수 없었던 마지막 문제입니다.

출처

2017-04-13 slinky_bass

React 응용 프로그램을로드하는 iframe이있는 overlaying div와 똑같은 문제가 발생했습니다. 이것이 최근의 iOS 10.3.x 업데이트와 관련이 있는지는 잘 모르겠지만 이전에는 보지 못했습니다. 입력 필드에 무언가를 입력하자마자 iframe이 사라집니다. 때로는 몇자를 입력하는 경우가 있는데, 때로는 첫 번째 문자가 사라지기도합니다. – tukkajukka

@tukkajukka 흥미롭게도 필자의 시나리오에서 요소가 입력 포커스에 올바르게 표시되면 타이핑 할 때 아무런 문제가 없습니다. 요소는 입력시 올바르게 표시되는 상태로 유지되며 AI와 대화하면서 여러 메시지를 보낼 수 있으며 모든 것이 계속 볼 수 있습니다. 소프트 키보드가 활성화 될 때 "무작위 보이지 않는 버그"에 대한 나의 특별한 변형은 초점을 맞추는 것처럼 보입니다. 올바르게 표시되거나 보이지 않습니다. –

소프트 키보드를 숨기려고 했습니까? 영향을 미치나요? – tukkajukka

입력에 초점이 맞춰지면 iOS 확대와 관련이있는 것으로 보입니다.

입력이있는 iframe이 포함 된 오버레이 요소를 열면 position: fixed;을 body 요소로 설정하여 문제를 해결할 수있었습니다. 위치를 fixed으로 설정하면 기본 요소를 스크롤하지 못하게됩니다.

출처

2017-04-13 10:08:31 tukkajukka

요소가 무작위로 입력 포커스 - 사파리 IOS에서 표시되지 않습니다.

답변

관련 문제