Я создаю веб-сайт портфолио, в котором для отображения сетки и фильтрации миниатюр используются только 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/. Это наводит меня на мысль, что это определенно проблема мобильного веб-набора, а не только 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>