CSS列：checked checked擬似クラスを使用しているときにモバイルでバグが発生する

Question

グリッドを表示してサムネイル画像をフィルタリングするために、CSS3のみを使用するポートフォリオWebサイトを構築しています。

You can see what I've done here.

私はthis tutorialを使用し、使用して動作するようにフィルタ機能を持って：確認疑似クラスを。

グリッドは、css3列を使用してシームレスに応答するフォトグリッドを作成します。私はChris Coyier's exampleを使用しました。

すべての機能は最新のブラウザでは機能しますが、iPhone用のモバイルサファリでは機能しません。さらにテストすると、それはiPhone用のSleipnirブラウザでも動作しますが、Opera Miniブラウザでは動作します。また、iPad用のiOS Safariでもまったく同じことを行います。

ブラウザの幅が小さいため、バグが発生しないことにも注意してください。それは問題にマックOSXのSafari 5.今の

上の小さなブラウザの幅で正常に動作します： iPhone上で閲覧するときは、フィルターラベル（ウェブデザイン、イラスト、書体をクリックするまで、すべてが素晴らしく見えます、アイデンティティ、および印刷）。ラベルをクリックした後、移動するものは何もありません。サムネイルの不透明度だけが変化します。たとえば、「アイデンティティ」をクリックすると、右の列が折れて画像が消えるように見えます。ここで、「すべて」をクリックすると、画像が右の列に表示され、最初にページにアクセスしたときの様子がすべて表示されます。

画像は、画像の最初の列の下、フッターの下にあり、見えないように見えます。ここでhttp://cl.ly/1M3F1t1N410s150h1o40

それはが実際にが今のように見えるものさ - - ここで

はそれが がは "アイデンティティ" をクリックした後のように見えると仮定何である http://cl.ly/0r1v0Z2c1f0I2U0X0T3m

UPDATE： 私のCSSからlist-style: none;を削除すると思われるそれは多くを改善する。なぜ私は考えていない。まだ完全には動作しません。サムネイルの一部はまだ消えています。もう少し作業します。

UPDATE 2： 私はネイティブブラウザを実行している2つのAndroidタブレット上でサイトをテストしました。それはアンドロイドで同じことをするようです。これは実際にはWebkit（私は思う）のモバイルブラウザでしか起こらないので、これは本当に面倒です。たぶんこれはラベル/入力と関係があります。それが私が考えることができる唯一のことは、モバイルブラウザについては違う点です。 iOSのサファリがラベルのタッチイベントを許可するように、いくつかのjavascriptを入力する必要がありました。デフォルトでは、iOSでは入力を選択するためにラベルに触れることはできません（非表示のラジオボタンを使用しています）。私はなぜそれがページの周りの画像を移動するのか分からない。多分、ズームイン入力タッチ機能と関係がありますか？

UPDATE 3：Firefoxのモバイル開発ツールの 作品は、こちらをご覧ください：http://www.mozilla.org/en-US/mobile/。 これは、iOSだけでなく、モバイルWebkitの問題であると確信しています。

私が使用しているコードは、ここにあります：チェックされた疑似クラスのサムネイルのフィルタリングです。 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; 
} 

小セクション： <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の不透明度のフィルタリングは、iOSで本当にあいまいなバグが発生します。面白いのは、iOSで唯一のものだ...それはあまり知られていないので、誰もこのバグをもう一度見かけることはないだろう。

私はいつかそれを壊してバグを提出したいと思っています...しかし、私はSafariに提出したことを聞いただけで、iOS Safariはありません。

Answer 2

:checkedだけOperaブラウザでサポートされているからです。

詳細については、hereを参照してください。