프로젝트를 진행 중에 안드로이드 자체 Back버튼을 클릭하는 경우 Salesforce Mobile App에서 백화현상이 일어나는 현상을 발견했다.
백화현상은 SFDC에서 개발한 컴포넌트 화면에서 다른 컴포넌트를 호출할 때, Salesforce Mobile App 자체에 내장되어 있는 Back 버튼이 아닌 안드로이드 자체 뒤로가기 버튼을 클릭할 경우,
화면이 하얗게 되는 백화현상이 발생한다. 이 문제는 SFDC Mobile App의 자체 에러이다.
이 것 때문에 난리도 아니였지만 우선 해결 방법에 대해 공유한다.
현재 SFDC Mobile App에서 Aura UI가 동작하는 방식은 이러하다.
모바일 화면에서 'overlayLibrary 방식으로 팝업 화면을 띄운다.
1. 부모 화면을 화면에서 없앤다. (display:none)
2. 배경화면을 화면에 보여준다. (반투명 layer 보이게)
3. 팝업창을 띄운다.
createComponent를 사용하여 다른 Component를 호출하는 경우, SFDC 자체적으로 기존에 Component의 CSS가 display:none으로 변경되고, 호출한 Component가 보여지게 된다.
그럼 문제가 되는 부분인 뒤로가기를 눌렀을 때 Aura UI가 백화현상이 발생하는 시점은
뒤로가기 버튼을 클릭한다.
1. 팝업창을 닫는다.
2. 배경화면을 화면에서 없앤다. (반투명 layer 안보이게)
3. 부모화면을 화면에 보여준다. (display:none -> display:block)
현재 백화현상이 발생하는 부분은 3번에서 부모화면을 display:none에서 display:block으로 변환하는 시점에서 발생하고 있는데, 호출한 Component가 닫히고 원래의 Component 화면을 보여주는 부분에서 display:block으로 변경되지 않아 발생하지 않아 화면이 응답없는 하얀 화면이 나오게 된다.
이 부분에 대하여 SFDC Case로 문의하였으나, 자체적인 에러라고 판명되어 별도의 가이드를 받지 못하였다.
아래는 실제 진행하면서 조치한 방법이다.
.cmp
<aura:html tag="style">
.phone.container.slds-is-mobile .viewport[aria-hidden="true"] {
display:block !important;
}
<aura:html>다른 Component를 호출하는 부모 Component에서 aura:html을 사용하여 display:block을 처리하는 css 구문을 추가하게 되면 백화현상이 없이 정상적으로 작동하게 된다.
