Ошибка CSS Columns - разрывы на мобильных устройствах при использовании псевдокласса:checked

Question

Я создаю веб-сайт портфолио, который использует только CSS3 для отображения сетки и отфильтровывает эскизы изображений.

Вы можете увидеть, что я сделал здесь.

Я получил функциональность фильтра для работы с помощью этого учебника и с помощью псевдокласса: checked.

Сетка сделана с использованием колонок css3 для создания бесшовной адаптивной фото-сетки. Я использовал пример Криса Койера.

В большинстве современных браузеров все работает, но в мобильном сафари для iPhone оно ломается. После дальнейшего тестирования он, похоже, также ломается в браузере Sleipnir для iPhone, но работает в браузере Opera Mini. Кроме того, он делает то же самое на iOS Safari для iPad.

Также важно отметить, что ошибка не возникает из-за небольшой ширины браузера. Он отлично работает при небольшой ширине браузера на Mac OSX Safari 5.

Теперь о проблеме: при просмотре на iPhone все выглядит великолепно, пока вы не нажмете на ярлык фильтра (веб-дизайн, иллюстрация, гарнитуры, идентификация и печать). После нажатия на ярлык ничего не должно двигаться. Меняются только непрозрачности миниатюр. Например, после нажатия "Идентификация" правый столбец разрывается, и изображения исчезают. Теперь нажмите "Все", и изображения появятся в правом столбце, и все выглядит так, как при первом посещении страницы.

Изображения, кажется, попадают под первый столбец изображений, ниже нижнего колонтитула и вне поля зрения.

Вот как это должно выглядеть после нажатия "Идентичность" - http://cl.ly/1M3F1t1N410s150h1o40

Вот как это выглядит сейчас - http://cl.ly/0r1v0Z2c1f0I2U0X0T3m

ОБНОВЛЕНИЕ: Удаление list-style: none; от моего CSS, кажется, это значительно улучшилось. Понятия не имею почему. Тем не менее, не работает идеально, хотя. Некоторые из миниатюр все еще исчезают. Будет работать над этим еще немного.

ОБНОВЛЕНИЕ 2: Я проверил сайт на двух планшетах Android с нативным браузером. Кажется, сделать то же самое на Android. Это действительно раздражает, поскольку это происходит только в мобильных браузерах (я думаю). Может быть, это как-то связано с метками / входами. Это единственное, о чем я могу думать, в мобильных браузерах. Мне пришлось ввести немного javascript, чтобы iOS-сафари разрешало сенсорные события на ярлыках. По умолчанию iOS не позволяет вам прикоснуться к метке, чтобы выбрать вход (я использую скрытые переключатели). Я не знаю, почему это переместило изображение вокруг страницы. может быть, это связано с функцией увеличения при касании?

ОБНОВЛЕНИЕ 3: Работы над инструментами для мобильных разработчиков Firefox можно найти здесь: http://www.mozilla.org/en-US/mobile/. Это наводит меня на мысль, что это определенно проблема мобильного webkit, а не только iOS.

Если вам интересно, вот код, который я использую для: проверенной фильтрации миниатюр псевдокласса.

.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;
}

Небольшой раздел HTML: <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

ОК... Короткий ответ: я получил его, устраняя css-columns, Я создал сетку, используя inline-block вместо этого, и сделал это легко с помощью vertical-align:middle, Вы могли бы также сделать сетку, используя поплавки.

И работает здесь: http://test.davewhitley.com/not-wp/debug/index.php

Насколько я могу судить, фильтрация непрозрачности css-columns + css вызывает действительно неясную ошибку в iOS. Забавно, что это только в iOS. Я чувствую, что никто никогда не столкнется с этой ошибкой, потому что она так неясна.

Я хотел бы сломать его однажды и отправить сообщение об ошибке... но я слышал только о том, чтобы отправить его в Safari, а не в iOS Safari.

Answer 2

Это потому что :checked поддерживается только в браузерах Opera.

Смотрите здесь для получения дополнительной информации.