I have embarked on the creation of a portfolio website that relies solely on CSS3 to present a grid and filter out thumbnail images.
If you're curious about what I've accomplished so far, feel free to take a look here.
To achieve the filtering functionality, I followed this tutorial and leveraged the :checked pseudo class.
The grid itself is constructed using css3 columns to establish a seamless responsive photo grid. I referenced Chris Coyier's example.
Everything is functional across most modern browsers, but encounters issues with mobile safari for iPhone. Further testing revealed similar problems in the Sleipnir browser for iPhone, yet Opera Mini works fine. The same issue persists on iOS Safari for iPad as well.
It's worth noting that the bug isn't caused by the narrow browser width. The website functions normally at smaller browser widths on Mac OSX Safari 5.
Now onto the problem: When viewed on an iPhone, everything appears smooth until a filter label (web design, illustration, typefaces, identity, and print) is clicked. After clicking a label, nothing should shift - only the opacities of the thumbnails change. However, after selecting "Identity," for instance, the right column breaks and the images seem to vanish. Toggling back to "All" reveals the images in the right column, restoring the initial page appearance.
The images unexpectedly fall beneath the first column, below the footer and out of view.
This is what it is supposed to look like after clicking "Identity" —
Here is the current actual display —
UPDATE:
Strangely, removing list-style: none; from my CSS significantly improves the situation, although some thumbnails still disappear. Further troubleshooting is required.
UPDATE 2: Upon running tests on two Android tablets' native browsers, the same issue occurred on Android devices. This is frustrating as it seems exclusive to webkit (presumed). The discrepancy might be linked to labels/inputs - the only variation discernible between mobile browsers. To enable touch events on labels in iOS Safari, I incorporated JavaScript as touch events were disabled by default for labels (utilizing hidden radio buttons). It remains unclear why this results in image displacement; perhaps due to the zoom-on-input-touch feature?
UPDATE 3: The site performs flawlessly on Firefox mobile developer tools found here: . This reinforces the notion that it's a mobile webkit predicament, not exclusive to iOS.
If interested, here is the code snippet implementing the :checked pseudo class for thumbnail filtering.
.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;
}
An excerpt of the HTML :
<li class="ff-item-type-1"><a href="projects/emily-patridge/"><img src="images/em_c.jpg" alt="Emily Patridge Website" /></a></li>