iframe 내에서 위치가 고정 된 요소가 Safari에서 렌더링되지 않습니다.

Question

iframe에 position: fixed;의 요소가 올바르게 렌더링되지 않는 문제가 있습니다. Safari의 macOS에서만이 문제를 발견했습니다. 여기

는 보는 방법이다 : 페이지에서

은 상단과 하단을로드 :

여기

는 맥 OS에서 사파리 (페이지로드) 모습입니다 막대는 표시되지 않습니다. 그들은 공간을 차지하는 DOM에 있으며 클릭 할 수 있지만 브라우저에서 "렌더링"하지 않았습니다. 위 이미지에서 볼 수 있듯이 막대는 공백으로 나타납니다.

JS, CSS를 통해 다시 그리거나 브라우저의 크기를 조정하면 막대가 나타납니다. 그러나 우리는 다시 그리기를 강제하는 방법에 대한 해결책을 찾고 있지 않습니다. 우리의 질문은 이것이 왜 처음에 일어나는가하는 것입니다.

은 현재 살아있는 예를 찾을 수 있습니다

https://testing.enuvo.ch/user/collect/#collector#/user/overlay

PS를 : 항상 발생하지 않습니다. 경우에 따라 브라우저의 크기를 조정하고 다시 시도 할 때 올바르게 표시됩니다. 문제를 재현 할 수 있기를 바랍니다.

Answer 1

예를 들어 보았는데 정말 이상합니다. 캐시 문제에 대해 생각해 보셨습니까? Safari에는 iframe 캐싱에 대한 고유 한 동작이 있습니다.

이 iframe에서 HTTP 헤더를 변경하여 캐시를 비활성화 할 수 있습니까?

header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1. 
header('Pragma: no-cache'); // HTTP 1.0. 
header('Expires: 0'); // Proxies 

Answer 2

당신이 iframe이 파일이 아닌 당신의 뷰 파일에서 CSS를 작성해야합니다 : 여기

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 

는 PHP의 예입니다.

Answer 3

position: fixed 및 z-index에는 몇 가지 결함이 있습니다. 오래된 브라우저 중 일부는 조금 다르게 처리하고 다른 방식으로 컨텍스트를 스태킹합니다.

시행 착오의 조금 후에 나는 추가하여 주입 스타일 시트로 작업을 진행하게 관리했습니다 :

#ol-main-header, 
#cl-footer { 
    -webkit-transform: translateZ(0); 
} 

은 또한 당신은 unnecesarry z-index: 99999 제거 할 수 있어야한다. 희망이 도움이됩니다.