CSS Columns : checked 가상 클래스를 사용하는 중에 모바일에서 버그가 발생했습니다.

Question

그리드를 표시하고 미리보기 이미지를 필터링하기 위해 CSS3만을 사용하는 포트폴리오 웹 사이트를 구축하고 있습니다.

You can see what I've done here.

나는 this tutorial을 사용하고를 사용하여 작업 할 필터 기능을 가지고 : 의사 클래스를 확인했습니다.

그리드는 css3 열을 사용하여 반응이 빠른 사진 격자를 만듭니다. 나는 Chris Coyier's example을 사용했다.

모든 기능은 대부분의 최신 브라우저에서 작동하지만 iPhone 용 모바일 사파리에서 작동하지 않습니다. 추가 테스트를 마치면, 아이폰 용 슬리피 니어 브라우저에서도 작동하지만, 오페라 미니 브라우저에서는 작동하지 않는 것으로 보인다. 또한 iOS Safari for iPad에서도 똑같은 기능을합니다.

작은 브라우저 너비로 인해 버그가 발생하지 않는다는 점에 유의해야합니다. 아이폰에서 볼 때이 필터 레이블을 클릭 할 때까지 이 모든 것이 (웹 디자인, 일러스트, 서체를 멋지다 : 그것은에 문제가 이제 맥 OSX 사파리에 작은 브라우저 폭에 5

을 잘 작동 신분 확인 및 인쇄). 레이블을 클릭 한 후에는 아무 것도 움직이지 않습니다. 축소판의 불투명도 만 변경됩니다. 예를 들어 "ID"를 클릭하면 오른쪽 열이 깨지고 이미지가 사라지는 것처럼 보입니다. 이제 '모두'를 클릭하면 이미지가 오른쪽 열에 다시 나타나며 처음 방문했을 때와 같은 모양이됩니다.

이미지는 이미지의 첫 번째 열 아래, 바닥 글 아래 및 보이지 않는 것으로 보입니다. 여기 http://cl.ly/1M3F1t1N410s150h1o40

이 실제로 지금 모습입니다 - - 여기

는 가는 "아이덴티티"를 클릭 한 후 같이 할 생각입니다 무엇 http://cl.ly/0r1v0Z2c1f0I2U0X0T3m

UPDATE : 내 CSS에서 list-style: none;을 제거하는 것 같습니다. o 그것을 많이 향상 시키십시오. 나는 이유를 모른다. 그래도 완벽하게 작동하지 않습니다. 미리보기 이미지 중 일부는 여전히 사라지고 있습니다. 좀 더 노력할 것입니다.

는 업데이트 2 : 나는 기본 브라우저를 실행하는 두 안드로이드 태블릿에 사이트를 테스트했다. 그것은 안드로이드에서 같은 일을하는 것으로 보인다. 이것은 웹킷 (i think) 모바일 브라우저에서만 발생하기 때문에 실제로는 성가시다. 아마 이것은 레이블/입력과 관련이 있습니다. 그것이 내가 모바일 브라우저에 대해 다른 점을 생각할 수있는 유일한 것입니다. iOS 사파리가 라벨의 터치 이벤트를 허용하도록 일부 자바 스크립트를 입력해야했습니다. 기본적으로 iOS에서는 입력을 선택하기 위해 라벨을 터치 할 수 없습니다 (숨겨진 라디오 버튼을 사용하고 있습니다). 나는 그것이 왜 페이지 주위에 이미지를 옮길 지 모릅니다. 입력 - 확대/축소 기능과 관련이 있습니까?

UPDATE 3 : 여기 파이어 폭스 모바일 개발자 도구에 작품 : http://www.mozilla.org/en-US/mobile/. 이것은 iOS뿐만 아니라 모바일 웹킷 문제라고 믿습니다.

관심이 있으시면 여기에 사용한 코드 : checked pseudo class thumbnail filtering. HTML의

.ff-container input{ 
display: none; 
} 

.ff-items li img{ 
display: block; 
} 

.clr { 
clear:both; 
} 

.ff-items li{ 
opacity: 0; 
-webkit-transition: opacity 0.2s ease-in-out; 
     transition: opacity 0.2s ease-in-out; 
} 

.ff-container input.ff-selector-type-all:checked ~ .ff-items li, 
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1, 
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2, 
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3, 
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4, 
.ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5{ 
opacity: 1; 
} 

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), 
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), 
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3), 
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4), 
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5){ 
opacity: 0.1; 
} 

작은 섹션 : :checked는 오페라 브라우저에서 지원되기 때문에 <li class="ff-item-type-1">
<a href="projects/emily-patridge/">
<img src="images/em_c.jpg" alt="Emily Patridge Website" /> </a>
</li>

Answer 1

OK ... 짧은 대답은 내가 css-columns을 제거하여 작동하도록했습니다. 대신 inline-block을 사용하여 그리드를 만들고 vertical-align:middle을 사용하여 매끄럽게 만들었습니다. 아마 수레를 사용하여 그리드를 만들 수도 있습니다.

까지 여기에 실행 : http://test.davewhitley.com/not-wp/debug/index.php

는 지금까지 내가 말할 수있는 CSS-열 + CSS를 불투명도 필터링은 아이폰 OS에서 정말 애매한 버그가 발생합니다. 우스운 이야기지만, iOS에서 밖에 나오지 않는 것 ...이 버그가 너무 희미해서 아무도이 버그를 다시 만나지 못할 것 같습니다.

나는 언젠가 그것을 무너 뜨리고 버그를 제출하고 싶다. 그러나 나는 단지 iOS Safari가 아니라 Safari에 제출하는 것에 대해 듣는다.

Answer 2

이 있습니다.

자세한 내용은 here을 참조하십시오.