Search code examples
cssgridmobile-safaripseudo-class

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

UPDATE: Removing list-style: none; from my CSS seems to improve it a lot. I have no idea why. Still doesn't work perfectly though. Some of the thumbnails are still disappearing. Will work on it some more.

UPDATE 2: I tested the site on two android tablets running the native browser. It seems to do the same thing on android. This is really annoying since it only happens on webkit (i think) mobile browsers. Maybe this has something to do with labels/inputs. That is the only thing I can think of that is different about mobile browsers. I had to input some javascript so that iOS safari would allow touch events on labels. By default, iOS doesn't let you touch a label in order to select the input (i'm using hidden radio buttons). I don't know why that would move image around the page. maybe is has to do with the zoom-on-input-touch feature?

UPDATE 3: Works on firefox mobile developer tools found here: http://www.mozilla.org/en-US/mobile/. This leads me to believe this is definitely a mobile webkit problem, not just iOS.

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

Small section of HTML : <li class="ff-item-type-1">
<a href="projects/emily-patridge/">
<img src="images/em_c.jpg" alt="Emily Patridge Website" /> </a>
</li>

Solution

  • OK... Short answer is that I got it working by eliminating css-columns. I created the grid using inline-block instead, and made it seamless by using vertical-align:middle. You could probably make the grid using floats as well.

    Up and running here: http://test.davewhitley.com/not-wp/debug/index.php

    As far as I can tell, css-columns + css opacity filtering causes a really obscure bug in iOS. Funny that it's only crapping out in iOS... I feel like no one is ever gonna come across this bug again because it's so obscure.

    I would love to break it down one day and submit the bug... but I have only heard of submitting to Safari, not iOS Safari.