CSS Columns Bug — breaks in mobile while using the :checked pseudo class

I am building a portfolio website that uses only CSS3 to display a grid and filter out thumbnail images.

You can see what I’ve done here.

I got the filter functionality to work by using this tutorial and using the :checked pseudo class.

The grid is made using css3 columns to create a seamless responsive photo grid. I used Chris Coyier’s example.

Everything works in most modern browsers, but it breaks in mobile safari for the iPhone. Upon further testing, it seems to also break in the Sleipnir browser for iPhone, but WORKS in the Opera Mini browser. Also, it does the exact same thing on iOS Safari for iPad.

Also important to note that the bug does not occur because of the small browser width. It works fine at small browser widths on Mac OSX Safari 5.

Now on to the problem:
When viewed on the iPhone, everything looks great until you click on a filter label (web design, illustration, typefaces, identity, and print). After clicking on a label, nothing is suppose to move. Only the opacities of the thumbnails change. After clicking “Identity” for example, the right column breaks and the images seem to disappear. Now, click “All” and the images appear back into the right column and everything looks the way it did when you first visit the page.

The images seem to fall under the first column of images, below the footer and out of sight.

Here is what it’s suppose to look like after clicking “Identity” — http://cl.ly/1M3F1t1N410s150h1o40

Here is what it actually looks like right now — http://cl.ly/0r1v0Z2c1f0I2U0X0T3m

If you are interested, here is the code I am using for :checked pseudo class 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;
}