iOS가있는 버그 디스플레이 렌더링 : flex?

HTML5 디스플레이 및 요약 요소를 사용하고 있습니다. 전에 :: pseudo 요소로 사용자 지정 표식을 사용하고 있습니다. summary 요소는 최대 2 개의 span 요소를 포함 할 수 있습니다.iOS가있는 버그 디스플레이 렌더링 : flex?

display : flex (또는 display : inline-flex) 규칙을 요약 요소에 적용했습니다.

FF 그리고 크롬은 요약 요소를 정확히 예상대로 렌더링합니다. 한 줄로하고 flex를 사용하여 의사 및 span 요소의 너비를 제어합니다.

그러나 내 iPad 또는 iPhone에서 볼 때 요약 요소는 블록 또는 플렉스 방향 : 열처럼 렌더링됩니다. 의사 요소와 각 스팬은 새 행으로 렌더링됩니다.

동일한 스팬 요소를 사용하지만 div 요소에 빈 유사 요소가있는 매우 유사한 코드가 적용되었습니다. iOS는이 인스턴스에서 예상대로 렌더링됩니다 (flex-direction : 행).

나는이 문제의 원인을 명확히 알지 못하고 개발할 iOS 장치가 없기 때문에 디버깅하기가 어렵습니다.

<details> 
<summary> 
    <span>content</span> 
    <span>content</span> 
</summary> 
</details>

SCSS

나는 모든 공급 업체 접두사로 유지 mixin을 사용하고 있습니다. 나는 이것들을 혼란스럽게하지 않을 것이다!

details { 
display: flex; 
flex-direction: column; 
&[open] > summary::before { 
    content: '\e313'; 
} 
} 

summary { 
display: flex; //or could be inline-flex 
flex-direction: row; //not strictly needed since this is the default 
&::before { 
    content: '\315'; 
    flex: 0 0 $MARGIN; 
    cursor: pointer; 
} 
}

다음은 아이폰 OS에서 제대로

div { 
display: flex; 
flex-direction: row; 
&::before { 
    content: ''; 
    flex: 0 0 $MARGIN; 
    cursor: pointer; 
} 
}

출력 FF & 크롬 (행 등의 세부/요약 렌더)

마커 콘텐츠 내용

아이폰 OS (세부 사항을 렌더링 렌더링/요약 열)

마커

내용

출처

2017-12-25 shotleybuilder

나는이 문제를 해결하기보다는 해결책이 있는지 계속하기로 결정했다. summary 요소에 display : flex를 사용하는 대신에 span에 인라인 블록을 표시하도록 전환했습니다.

이

@supports (-webkit-overflow-scrolling: touch) {}

사용하여 아이폰 OS의 탐지는 내가 분별이 내가 플렉스에 의존 할 수 주어진 렌더링하기 위해 미디어 쿼리의 번호를 사용 했어. 인라인 블록 스팬 요소의 너비는 미리 계산해야합니다.

마지막으로 flex는 div에 남아 있습니다 (이러한 요소는 요약 요소를 반영하지만 딸은 없습니다).

더 만족스러운 해결책을 얻으면 여기에서 업데이트 할 것입니다.

출처

2017-12-26 21:11:06 shotleybuilder

iOS가있는 버그 디스플레이 렌더링 : flex?

답변

관련 문제