Ionic-framework: 헤더 표시줄이 상태 표시줄 뒤에서 위로 이동하거나 양식 필드에 포커스가 있을 때 뷰포트에서 완전히 벗어납니다.

#818의 중복

감사 해요. 베타2용 키보드 버그를 해결하기 위해 노력하고 있습니다.

이 문제를 일으킬 수 있는 단서가 있습니까?
당신이 beta2를 출시할 계획이 있을 때쯤이면 내 앱은 이미 출시되어 있습니다 ;-)

다음은 이 문제의 실제 데모입니다.

방금 "Ionic, v1.0.0-beta.1"을 사용하여 "시작하기" 프로세스를 통해 이것을 테스트했습니다.

내 단계:

• npm install -g 코르도바 이온
• 이온 시작 statusBarTest 사이드 메뉴
• ionic 플랫폼 ios 추가

그런 다음 간단한 양식으로 시작하도록 app.js 을 편집했습니다. :

<ion-view title="Form Test">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="First Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Middle Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Last Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 1">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 2">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="City">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="State">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Zip Code">
      </label>
    </div>

  </ion-content>
</ion-view>

그 다음에:

• 아이오닉 빌드 ios
• 이온 에뮬레이트 ios

결과는 다음과 같습니다.

보시다시피 키보드는 양식을 상태 표시줄로 밀어 올립니다.

헤이 Justin, 문제는

한 번 시도해 보고 도움이 되는지 알려주세요.

2014년 4월 2일 수요일 오후 4시 34분, Justin Noel [email protected]이 다음과 같이 작성했습니다.

다음은 이 문제의 실제 데모입니다.

방금 "Ionic,
v1.0.0-베타.1".

내 단계:

• npm install -g 코르도바 이온
• 이온 시작 statusBarTest 사이드 메뉴
• ionic 플랫폼 ios 추가

그런 다음 간단한 형식으로 시작하도록 app.js를 편집했습니다. :

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Middle Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 1">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 2">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="City">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="State">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Zip Code">
  </label>
</div>

그 다음에:

• 아이오닉 빌드 ios
• 이온 에뮬레이트 ios

결과는 다음과 같습니다.

[이미지: 상태 표시줄 문제] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

보시다시피 키보드는 양식을 상태 표시줄로 밀어 올립니다.

이 이메일에 직접 답장하거나 Gi tHubhttps://github.com/driftyco/ionic/issues/932#issuecomment -39386769에서 확인하세요.
.

불행히도, 그것은 도움이되지 않았습니다. 샘플 프로젝트에서 이것을 "style.css"에 추가했습니다.

body, .ionic-body {
    position: static;
}

Ionic CSS 파일 뒤에 "style.css"가 포함되어 있어도 작동하지 않았습니다. 또한 Safari 디버그에서 position: static 가 본문에 적용된 것을 확인했습니다.

그래서 운도 없이 그냥 몸으로 해봤다.

body {
    position: static;
}

다음으로 "ionic.css" 파일을 업데이트했습니다. 이것은 여전히 ​​작동하지 않았습니다.

또한 헤더를 정적으로 만들 의도가 있다고 생각했습니다. 그래서 나는 그것을 시도했다. 그것도 운이 없습니다.

아, iOS 7.1 전용이라는 것을 보지 못했습니다. 지금은 Mac에 액세스할 수 없으므로 내일 먼저 살펴보겠습니다. 이 문제를 조사하는 데 도움을 주셔서 감사합니다.

작업 데모에 감사드립니다 Justin :+1:

.pane 및 .view 에도 절대 위치가 있으므로 설정에 따라 .body 를 position:static 설정해도 문제가 해결되지 않습니다.

내가 구축한 사용자 지정 모바일 웹 앱에서 헤더는 이러한 무거운 위치 요소의 외부에 있어야 하고 헤더 자체는 키보드가 켜져 있을 때 거기에 머물도록 position:fixed 로 설정되어야 합니다. Android에는 adjust-resize 라는 옵션이 있습니다. 이 옵션은 키보드 위에 맞도록 보기를 찌그러뜨립니다. 반면에 iOS는 화면에서 입력을 중앙에 배치하기 위해 보기를 이동합니다.

Cordova에는 기본값이 false인 "KeyboardShrinksView"라는 기본 설정도 있습니다. 나는 아직 이것을 보지 않았지만 Android가 이미 adjust-resize로 수행하는 작업에 대한 iOS용 솔루션처럼 보입니다.

이 두 가지 차이점 사이의 조화를 만드는 것은 일의 지옥입니다.

이러한 모든 문제를 방지하기 위해 현재 키보드 수정 작업을 활발히 진행하고 있습니다.

이 버그는 불행히도 야간 1717에서 수정되지 않았습니다.

@tlancina가 알아차린 한 가지는 최신 탭 수정으로 입력을 직접 클릭해도 헤더가 위로 이동하지 않는다는 것입니다. 그래서 우리가 이 문제의 일부를 해결했다고 생각합니다. 그러나 입력을 래핑하는 레이블을 탭하면 300ms 후에 추한 기본 스크롤이 수행됩니다. 기본 Ionic CSS가 작동하는 방식은 래핑 레이블과 실제 입력 간의 차이를 구분하기 어렵기 때문에 이것이 항상 작동하지 않는 이유의 일부일 수 있습니다. 저는 이 테스트 페이지 를 사용하여 각 장치에서 이러한 문제를 디버그하는 데 도움을 받았습니다.

지금 당장은 레이블 클릭 시 기본값을 방지하지 않기 때문이라고 생각합니다. 입력을 래핑하는 레이블에서 e.preventDefault()를 수행하면 첫 번째 탭에서 키보드가 자동으로 팝업되지 않습니다. 이건 좀 더 알아봐야겠네요 감사합니다.

@adamdbradley는 야간 활동에 들어갈 때 이 수정 사항에 대한 다른 테스터로 자원했습니다. 고마워.

불행히도 이 문제는 1.0.0 beta2에서 아직 해결되지 않았습니다.

@CoenWarmer 우리는 문제를 인식하고 있으며 여전히 작업 중입니다. 또한 키보드 문제를 보고할 때 플랫폼, 플랫폼 버전, 모바일 브라우저, 에뮬레이터 또는 코르도바의 문제인지, 코르도바의 경우 전체 화면인지 여부를 알려주십시오. 다른 유용한 정보에는 레이블 또는 입력과 같이 탭한 요소, 입력에 도달하기 위해 언제든지 수동으로 스크롤해야 했는지, 메타 뷰포트에 height=device-height가 있는지 여부, 요소가 다음과 같은지 여부가 포함됩니다. 가상 키보드가 최종적으로 표시되는 위치 아래에 키보드가 표시되는 위치의 절반이 표시되거나 스크롤할 필요가 없는 위쪽에 표시됩니다. 감사 해요

다음에서 발생:

• iOS7.1.1
• 이온 1.0.0 베타 2
• 코르도바에서
• 시뮬레이터 및 장치에서
• 전체 화면이 아닌
• 레이블을 사용하지 않고 입력만
• 입력 필드에 포커스가 있는 경우 뷰를 스크롤할 수 있습니다. 입력 필드에 포커스가 없으면 뷰를 스크롤할 수 없습니다.
• 뷰는 포커스를 받고 키보드가 팝업된 직후에 스크롤되지 않습니다. 입력 필드에 초점이 맞춰지면 입력 필드에 손가락을 놓고 위로 끌어 보기를 웹 보기 밖으로 이동할 수 있습니다.

또한 1.0.0 beta2를 사용하는 Android 4.4 및 4.3에서도 발생합니다. iOS7.1과 똑같은 상황입니다. 따라서 입력 필드가 포커스를 받고 키보드가 팝업되면 아무 문제가 없습니다. 입력 필드에 포커스가 있고 손가락을 입력 필드에 놓고 위 또는 아래로 드래그하기 시작하면 모든 콘텐츠를 보기 밖으로 이동할 수 있습니다. . 나중에 스크린캐스트를 만들 예정입니다.

스크린캐스트: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

beta2 이후에 작은 화면(예: iphone3 또는 iphone4)에서 이 문제가 발생합니다.

아이폰 5 (OK)

아이폰 4 (문제)

@zelphir 이 문제를 재현하는 codepen을 제공해 주시겠습니까? 둘 다 iOS 7.0입니까, 아니면 7.1입니까?

@CoenWarmer 가 우연히 콘텐츠 영역 에 입력하게 되었나요 ? 귀하의 문제를 재현할 수 있는 유일한 방법은 스크롤 보기에 없는 입력을 갖는 것입니다.

명확히 하자면 스크롤 보기를 사용하지 않는 경우 예상되는 동작입니다. 키보드 아래에 입력이 있고 JS를 사용하여 해당 입력으로 스크롤할 수 없는 경우 브라우저는 내용을 볼 수 있도록 강제로 위로 이동하므로 모든 것을 위로 이동할 수 있습니다.

@tlancina 내 입력이 콘텐츠 영역 내에 있지 않습니다.

이것은 내가 사용하는 코드입니다.

<ion-view title="Delegates">
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>

  <ion-tabs class="tabs-icon-only tabs-double">
    <ion-tab title="A-Z">
      <ion-content class="slide-under-header has-header has-tabs has-double-tabs" padding="false" delegate-handle="DelegateScroll">
        <!-- stuff -->
      </ion-content>
    </ion-tab>
    <!-- another ion-tab -->
  <ion-tabs>
</ion-view>

나는 이것이 예상되는 행동이라는 것에 대해 당신이 말하는 것을 완전히 따르고 있는지 확신하지 못합니다. 지금은 모든 것이 헤더 아래에서 스크롤될 때 앱이 중단되는 것처럼 보입니다. 대신 이온 함량 내에 입력 필드를 배치해야 합니까?

페이지 맨 아래에 도달하는 여러 입력 목록이 있다고 가정합니다. Javascript를 사용하여 스크롤할 수 있는 영역 내에 있지 않은 경우 키보드가 나타날 때 어떻게 표시할 수 있습니까? 유일한 방법은 헤더를 포함한 모든 콘텐츠를 이동하여 작동하는 기본 브라우저 스크롤을 사용하는 것입니다.

입력 또는 포커스 가능 영역이 이온 스크롤 보기 내에 있는 경우 기본 스크롤을 방지하고 Javascript를 사용하여 헤더를 제자리에 두고 보기로 가져옵니다.

불행히도 나는 UI 라우터 전문가가 아니지만 페이지의 모든 콘텐츠 주위에 이온 콘텐츠를 배치하고 도움이되는지 확인하십시오.

이제 이해하지만 뒤로 버튼을 포함하여 전체 탐색 모음이 사라지는 바람직하지 않은 시각적 효과로 이어지지 않습니까?

내 사용 사례의 요점에 대해 말하자면, ion-content 내에 입력 필드를 넣으면 전환 애니메이션이 iOS 및 Android에서 올바르게 작동하는 방식으로 헤더 표시줄 아래 상단에 고정된 상태로 유지되도록 하려면 어떻게 해야 합니까?

예, 탭을 저글링하고 입력을 위해 스크롤 가능한 영역을 유지하는 상황은 꽤 까다로워 보이며 상당히 자주 발생합니다. @adamdbradley 와 저는 지금 그것을 조사하고 있습니다.

다음과 같은 작업을 수행하는 경우 전환 문제를 이해하고 있는지 확실하지 않습니다.

<ion-content>
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>
</ion-content>

애니메이션을 망쳐놓나요? 콘텐츠 영역이 하나만 있으면 콘텐츠 영역이 여러 개 있으면 다른 문제가 발생할 수 있습니다.

@tlancina 아 좋아, 하나의 부분에 두 개의 이온 함량 요소를 사용하는 것을 고려하지 않았습니다. 그것이 어떻게 작동하는지 보고 다시 보고할 것입니다.

내가 언급한 전환 애니메이션 문제는 특정 Android 버전에서 발생합니다. 요소에서 position: static을 사용하고 해당 보기에서 전환하면 Android 4.1에서 4.3으로(100% 확실하지는 않지만 확인할 것입니다) 해당 요소는 애니메이션이 시작되면 잠긴 상태로 유지됩니다. 따라서 모든 요소(이온 콘텐츠, 탭, 헤더 막대 등)는 왼쪽으로 이동하기 시작하지만 position: static을 지정한 요소는 애니메이션이 완료될 때까지 같은 위치에 유지됩니다. 이것은 iOS에서는 발생하지 않습니다. 이것이 내가 정적 위치를 어디에서나 사용하는 것을 주저한 이유입니다.

@tlancina 방금 입력 요소를 하나의 이온 함량에 넣고 나머지 내용을 다른 두 번째 이온 함량에 넣으려고 했습니다. 불행히도 입력 요소에 입력된 모든 입력은 이제 더 이상 다른 이온 함량에 있는 ng-repeat를 필터링하지 않습니다. 다른 제안?

@CoenWarmer ion-content가 자식 범위를 생성하기 때문입니다.

두 콘텐츠 모두에 컨트롤러를 배치해 보십시오. 컨트롤러가 있는 경우 입력에 프리미티브를 사용하지 마십시오.

범위 상속의 '점' 문제를 겪고 있습니다. 다른 자식 범위의 기본 요소가 부모 범위가 아닌 자식 범위에 설정되고 있습니다. 내가 뭐라는지 알 겠어? 그렇지 않은 경우 알아두세요. 링크를 찾아/설명하겠습니다.

불행히도 그것에 익숙하지 않습니다. 공유하시겠습니까? :)

https://www.youtube.com/watch?v=DTx23w4z6Kc

아, 네, 이해가 됩니다! 한 번 더 해보겠습니다 :+1:

안녕하세요 @아담입니다. 입력이 있는 바닥글은 어떻습니까? 스크롤 영역 밖에 있기 때문에 문제도 발생합니다. 어떤 방법이 있습니까?

iPad(7.1)에서도 이 문제가 발생합니다. ionic이 설정되지 않은 경우 최근 변경 후 뷰포트에 height=device-height를 추가하는 것을 보았습니다.
이 속성 때문에 뷰포트가 약 200px(높이)로 커지고 완전히 스크롤할 수 있습니다.
내가 그것을 제거하면 작동합니다.
.view 및 .pane을 position: fixed로 설정하고 body를 position: static으로 설정하면 어떻게든 이 문제를 해결할 수 있습니다. 그러나 메인 뷰포트는 여전히 크고 손가락을 위아래로 움직이면 오른쪽에 스크롤바가 표시됩니다.

그건 그렇고 ... 이것은 입력 초점과 독립적입니다. 입력 포커스는 결과를 볼 수 있도록 스크롤 위치만 이동합니다.

여러분, 현재 진행 상황은 어떻습니까?
사용자 정의 ionic 파일을 만들고 추가 'height=device-height'를 제거했습니다.
이 변경 후에는 모든 것이 잘 작동합니다. 더 이상 CSS 수정이 필요하지 않으며 입력 필드 탭에 대한 초점이 올바르게 작동합니다.
또한 iOS에서 키보드 플러그인을 사용하고 있으며 다음을 수행합니다.

Keyboard.shrinkView(true);
Keyboard.hideFormAccessoryBar(true);

별도의 이온 콘텐츠에 입력을 배치해도 입력에 포커스가 있을 때 헤더 표시줄을 포함하여 전체 보기를 웹 보기 아래에서 스크롤 가능하게 만드는 동작이 중지되지 않습니다. 이전 스크린캐스트에서와 동일한 동작이 발생합니다: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@D3CK3R 우리는 모든 다양한 뷰포트 시나리오를 바로

@CoenWarmer Ionic Keyboard Plugin을 실행해 주시겠습니까? 방금 공개했으며 스크롤 보기 외부의 입력에서 어떻게 작동하는지 궁금합니다.

Cordova 프로젝트 내부에서 cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git 를 실행하여 설치할 수 있습니다.

@tlancina 작동합니다! 플러그인을 추가한 후 입력에 포커스가 있을 때 콘텐츠를 뷰포트 아래로 더 이상 끌 수 없습니다. 엄청난!!

플러그인이 프로덕션 준비가 되었습니까? 이 프로젝트가 방금 스토어에 게시되었으므로 가능한 빨리 배포하고 싶습니다.

@CoenWarmer 마지막 댓글을 보고 얼마나 기뻤는지 모릅니다! 멋진 작품 @tlancina!

@adamdbradley @tlancina

응!!!

@CoenWarmer iOS용 예, 프로덕션 준비가 되었습니다. 방금 앱 스토어에 승인된 앱에 이전 버전이 있으며 추가한 스크롤 항목이 거부 사유가 되지 않는다고 생각합니다. 당신을 위해 일하고 있어 정말 기쁩니다!

닫기 좋은? @tlancina

이것은 beta14 릴리스에서 여전히 문제였습니다. 광범위한 디버깅 후에 마침내 수정 사항을 찾았습니다.

제 경우에는 meta viewport 와 관련이 있었습니다.

원래 값(헤더가 상태 표시줄 뒤에 표시되도록 함)

<meta name="viewport" content="width=device-width">

새로운 가치(이 문제 해결)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

저는 beta1 이전에 프로젝트를 시작했기 때문에 이것은 아마도 내가 눈치채지 못한 일부 레거시 html이었을 것입니다.

이것이 누군가를 돕기를 바랍니다.

@rvanbaalen 내 색인 파일에 정확한 메타 뷰포트가 있지만 제 경우에는 입력 텍스트 요소에 초점을 맞추면 본문이 상태 표시줄 상단에 위치하여 상태 표시줄이 숨겨집니다. 키보드를 아래로 밀어도 상태 표시줄이 숨겨져 있습니다.

이것은 여전히 ​​나에게 문제입니다. 키보드 플러그인이 추가되었습니다. 간단한 텍스트 영역을 "메모장"으로 사용하여 높이: 100% 스타일로 볼 수 있는 것처럼 전체 화면을 채우려고 합니다. 이러한 스타일을 작동시키려면 높이 스타일이 부모의 높이로만 확장되기 때문에 scroll="false"로 스크롤을 비활성화해야 했습니다. 이 문제를 피하기 위해 이 "메모장"을 만드는 더 좋은 방법이 있을 수 있으며 제안해 주시면 감사하겠습니다.

아래의 스크린샷을 더 명확하게 만들기 위해 텍스트 영역에 배경색을 추가했습니다.

이 보기를 사용하고 있습니다.

<ion-modal-view>
    <ion-header-bar class="bar-royal">
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.closeAddNote()">Cancel</button>
        </div>
        <h1 class="title">Add Note</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.saveNote(vm.noteContent)">Done</button>
        </div>
    </ion-header-bar>
    <ion-header-bar align-title="left" class="bar-subheader bar-stable">
        <h3 class="title">adding note for `client name`</h3>
    </ion-header-bar>
    <ion-content class="has-subheader" scroll="false">
        <div class="list padding" style="height: 100%;">
            <textarea placeholder="Comments" style="height: 100%; width: 100%;" ng-model="vm.noteContent"></textarea>
        </div>
    </ion-content>
</ion-modal-view>

초기 보기

텍스트 영역을 클릭한 후

텍스트 영역에 포커스가 있는 동안 스크롤할 수 있음을 보여줍니다.

여전히 문제입니다. @ajoslin @adamdbradley 를 도와 주세요 .

iOS 시뮬레이터 - iPhone 6 / iOS 8.3
이온 버전 1.0.0-rc.0
설치된 플러그인:

• com.ionic.keyboard
• com.phonegap.plugins.PushPlugins
• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova.file
• org.apache.cordova.geolocation
• org.apache.cordova.media

모달의 HTML:

<ion-modal-view>
  <ion-header-bar>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="closeModal()">Cancel</ion-button>
    </div>
    <h1 class="title">Modal View</h1>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="create()">Create</ion-button>
    </div>
  </ion-header-bar>
  <ion-content>    
    <form>
...
</form>
</ion-content>
</ion-modal-view>

@ravivit9 @mikehaas763 @AshleyRudland
당신은 시도해야합니다

iOS Notes
If the content of your app (including the header) is being pushed up and out of view on input focus, 
try setting cordova.plugins.Keyboard.disableScroll(true). 
This does not disable scrolling in the Ionic scroll view, 
rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.

키보드 ios 노트에서

그것은 매력처럼 작동합니다.

Cordova.plugins.Keyboard.disableScroll(true)을 설정하고 뷰가 내 입력으로 스크롤될 것으로 예상할 수 있습니까?
스크롤을 비활성화하면 상태 표시줄이 더 이상 푸시되지 않지만 키보드가 내 입력 필드와 겹칩니다.

@michaelknoch 입력이 스크롤 보기(ion-content와 같은) 내에 있는 한 ionic.keyboard.disable() 호출하지 않는 한 자동으로 보기로 스크롤되어야 합니다.

@michaelknoch 키보드 연결을 요청하는 것 같습니다.

@LightZam 하지만 ion-footer 막대만 지원하고 내 입력은 ion-view의 내 콘텐츠 내부에 있습니다.

@tlancina 내 콘텐츠를 ionScroll로 감싸야 하나요? http://ionicframework.com/docs/api/directive/ionScroll/

@michaelknoch ion-content 에는 이미 스크롤 보기가 있으므로 그럴 필요가 없습니다. 사용 중인 전화 및 OS와 함께 문제를 재현하는 간단한 코드펜을 만들 수 있고 ionic info 명령의 출력(CLI를 사용하는 경우) 봐.

@tlancina 이 문제에 직면해 있습니다.
코르도바 CLI: 5.2.0
이온 버전: 1.1.0
Ionic CLI 버전: 1.6.4
Ionic 앱 라이브러리 버전: 0.3.8
iOS 배포 버전: 1.7.0
ios-sim 버전: 4.1.1
OS: 맥 OS X 요세미티
노드 버전: v0.12.7
Xcode 버전: Xcode 7.0 빌드 버전 7A176x
전화 - ​​아이폰 4S, iOS 7.0.6

"cordova.plugins.Keyboard.disableScroll(true)" 헤더를 유지하면 밀어내지 않지만 키보드는 내 텍스트 영역 위에 옵니다. 그리고 나는 텍스트 영역(msd-elastic과 함께 사용)을 내부에 보관했습니다., whatsapp과 같은 유사한 스타일을 얻으려면 외부 이온 콘텐츠

그리고 내가 keyboard-attach를 사용하면 msd-elastic으로 망가집니다 :(
어떤 제안?

ionic.Platform.fullScreen()으로 시도
그러나 운이 없습니다 ... 또한이 fullScreen()은 ios에서 또 다른 문제를 생성합니다 ...
이 CSS는 fullscreen()을 호출할 때 적용되지 않기 때문에 헤더의 높이를 줄입니다.
.platform-ios.platform-cordova :not (.fullscreen) .bar- header:not (.bar-subheader) {높이: 64px; }

evrything은 andorid에서 괜찮 았습니다.

Cordova를 6.0.0으로 업그레이드한 후에도 거의 동일한 문제가 발생합니다. 즉, 양식 필드에 포커스가 있을 때 상태 표시줄이 나타나고 머리글 표시줄과 겹칩니다. 이 문제는 내 Android 기기에 있습니다. iOS 기기는 아직 사용해보지 않았습니다. 누구든지 pls를 도울 수 있습니까?

코르도바 CLI: 6.0.0
Gulp 버전: CLI 버전 3.8.11
Gulp 로컬: 로컬 버전 3.8.11
이온 버전: 1.0.0-rc.5
Ionic CLI 버전: 1.7.14
Ionic 앱 라이브러리 버전: 0.7.0
iOS 배포 버전: 1.8.3
ios-sim 버전: 5.0.4
OS: 맥 OS X 엘 캐피탄
노드 버전: v0.12.2
Xcode 버전: Xcode 7.2 빌드 버전 7C68

Cordova 6.0.0으로 업그레이드한 후 Android에서 이 문제가 발생했으며 플러그인 https://github.com/mesmotronic/cordova-plugin-fullscreen 의 AndroidFullScreen.immersiveMode 메서드를 호출하여 해결했습니다.

// 시스템 UI를 숨기고 숨긴 상태로 유지(Android 4.4 이상만 해당)
AndroidFullScreen.immersiveMode(successFunction, errorFunction);

이 문제는 여전히 발생하고 있습니다. 앱이 실제로 전체 화면에서 실행되어서는 안 되므로 전체 화면으로 이동하여 해결하는 것은 적절한 솔루션이 아닙니다. 그러나 테스트를 위해 시도한 결과 앱이 전체 화면 모드로 전환되는 동안에는 여전히 화면보다 "더 크"므로 상태 표시줄 아래에 있는 헤더로 약간 스크롤할 수 있습니다.
도와주세요!

이 문제가 있습니까? 해결 방법이 있습니까?

Ionic 2의 iOS에서도 동일한 문제가 있습니다.

환경
코르도바 CLI: 6.0.0
이온 버전: 2.0.0-beta.3
Ionic CLI 버전: 2.0.0-beta.19
Ionic 앱 라이브러리 버전: 2.0.0-beta.9
ios-deploy 버전: 설치되지 않음
ios-sim 버전: 5.0.6
OS: 맥 OS X 엘 캐피탄
노드 버전: v5.7.1
Xcode 버전: Xcode 7.2.1 빌드 버전 7C1002

보시다시피 Ionic 앱의 상태 표시줄과 헤더 사이에는 공간/패딩이 없습니다.

키보드의 새/기존 문제가 다시 나타납니다. 테이핑으로 입력에 초점을 맞출 때 스크롤을 비활성화할 수 있지만 가상 키보드 특수 버튼으로 양식 필드에 초점을 맞추면 헤더가 스크롤되지 않는 이전 문제가 다시 나타납니다. Android 키보드의 오른쪽 하단에는 양식의 다음 입력으로 전환할 수 있는 녹색 버튼이 있습니다. 스크롤을 끈 경우에도 버튼은 뷰를 스크롤하여 초점이 맞춰진 입력을 표시하고 결과적으로 헤더가 화면에서 벗어납니다.

이를 테스트하려면 첫 번째 입력이 뷰에 있어야 하고 키보드가 보이는 포커스가 있어야 하고 두 번째 입력은 접힌 부분 아래(키보드 아래 어딘가)에 있어야 합니다. 이제 녹색 버튼(그림과 같이)을 탭하면 보기가 스크롤되고 헤더가 화면에서 사라집니다.

코르도바 6.3.0
이온 플러그인 키보드 2.2.1
Android 5가 설치된 기기에서 테스트됨
Android 24.0.1용 빌드

이 버튼을 끄거나 문제를 해결할 아이디어가 있습니까? 100% 확신할 수는 없지만 이것이 코르도바를 6+ 버전으로 업그레이드한 후에 시작된 것으로 생각됩니다.

@rafaellop 이 문제를 해결하셨습니까?

iOS에서 전화/카메라 화면에서 파일 업로드가 열릴 때 이 문제가 나타납니다.

이메일 작성기에 이 문제가 있습니다.

편집 모든 것을 시도한 후에도 여전히 이 문제가 발생하는 경우 [email protected] 로 되돌려 보십시오

이 문제는 여전히 나에게도 발생하며 해결되지 않았습니다.

IOS에서 상태 표시줄을 탭하면 IONIC2에서 전체 이온 함량이 깜박입니다.이 문제를 해결하는 방법입니다.제안하십시오..
감사 해요.

[email protected]로 되돌리는 것은 돕지 못했습니다. 기본 카메라 파일 라이브러리를 사용한 후에도 동일한 문제가 발생합니다.

다른 게시물에서 방금 2.2.1에서 2.2.0으로 cordova-statusbar 플러그인을 다운그레이드할 수 있었고 문제가 해결되었음을 깨달았습니다. 제 경우에는 상태 표시줄 플러그인이 문제를 일으킨 것 같습니다.

나는이 문제가 있었다

• 이온 3.9.2
• 코르도바-ios 4.4.0
• iOS 10.3
• 다양한 iPhone 장치 및 에뮬레이터

height: 100%; (이것은 모두 이온 함량임)가 있는 텍스트 영역이 있었고 이온 헤더는 텍스트 영역에 초점이 맞춰질 때마다 시야에서 축소됩니다. 내 수정은 height: auto; min-height: 25%; 로 변경하고 height: 100%; margin: 0; padding: 0; 및 (click)=focusTextArea() 있는 div 안에 텍스트 영역을 넣는 것입니다. 약간 버벅거리고 더 나은 솔루션을 원하지만 지금은 괜찮습니다. +1:

이 플러그인 ionic cordova 플러그인 add cordova-plugin-ionic-webview --save를 사용하십시오. 덕분에 내 문제가 해결되었습니다.

나는 이메일 작성기 플러그인과 함께 동일한 문제를 경험했습니다.

cordova-plugin-statusbar를 버전 2.2.1에서 2.3.0으로 업그레이드하여 문제를 해결했습니다.

@jvhe123 방금 해봤는데 v2.3.0이 존재하지 않는 것 같은데요, v2.2.3을 말씀하시는 건가요?

@glenr4

• 코르도바 플러그인 키보드 1.2.0
• 이온 플러그인 키보드 2.2.1

iPhone X에서 이 문제가 발생했습니다. 키보드를 열면 머리글이 위로 올라와 거의 페이지에서 벗어났습니다.

영향을 받는 페이지의 JavaScript 파일에 eventListener를 넣어 문제를 해결했습니다.

document.addEventListener('deviceready', function(e){ window.addEventListener('native.keyboardshow', function () { cordova.plugins.Keyboard.disableScroll(true); }); });

이것은 저에게 효과가 있었고, 여러분 중 한 명에게도 효과가 있기를 바랍니다.

문제를 주셔서 감사합니다! 이 문제는 원래 문제와 관련이 없는 댓글을 방지하기 위해 잠겨 있습니다. 이것이 여전히 최신 버전의 Ionic에서 문제가 되는 경우 새 문제를 만들고 템플릿이 완전히 채워졌는지 확인하십시오.