CSS列使用：checked伪类时，在移动设备中出现错误 [英] CSS Columns Bug — breaks in mobile while using the :checked pseudo class

问题描述

您可以看到我在这里做了什么。

使用本教程并使用：检查伪类。

网格使用css3列创建无缝响应的照片网格。我使用 Chris Coyier的示例。

一切都适用于大多数现代浏览器，但它打破了iPhone的移动safari。进一步的测试，似乎也打破了Sleipnir浏览器的iPhone，但WORKS在Opera Mini浏览器。此外，它在iOS Safari的iPad上完全相同的事情。

同样重要的是要注意，由于浏览器的宽度很小，不会发生错误。在Mac OSX Safari 5上，它在小浏览器宽度下工作正常。

现在问题：
当在iPhone ，一切看起来很棒，直到你点击一个过滤标签（网页设计，插图，字体，身份和打印）。点击标签后，没有任何东西会移动。只有缩略图的不透明度改变。例如，单击身份后，右列断开，图像似乎消失。现在，点击全部，图片就会显示回右栏，而且一切都与您第一次访问该网页时的方式相同。

这些图片似乎属于

这是 假设 外观的第一列图片像点击身份后 - http://cl.ly/1M3F1t1N410s150h1o40

现在看起来像这样 http://cl.ly/0r1v0Z2c1f0I2U0X0T3m

UPDATE：
删除 list-style：none; 从我的CSS似乎改善了很多。我不知道为什么。仍然不能正常工作。一些缩略图仍然消失。

更新2：
我测试了两个android的网站运行本机浏览器的平板电脑。它似乎在Android上做同样的事情。这真的很烦人，因为它只发生在webkit（我认为）移动浏览器。也许这与标签/输入有关。这是我能想到的唯一的事情是不同的移动浏览器。我不得不输入一些javascript，以便iOS safari允许标签上的触摸事件。默认情况下，iOS不允许您触摸标签以选择输入（我使用隐藏单选按钮）。我不知道为什么会移动图像周围的页面。也许是与输入法上的放大触摸功能有关？

更新3：
适用于firefox移动开发者工具，位于此处： http://www.mozilla.org/en -US / mobile / 。
这让我相信这绝对是一个移动webkit的问题，而不只是iOS。

如果你有兴趣，这里是我使用的代码：检查伪类缩略图过滤。

  .ff-容器输入{
 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，
。 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.jpgalt =Emily Patridge网站/>
< / a>

< / li>

解决方案

OK ...简短的回答是，我得到它工作通过消除 css-列。我使用 inline-block 创建了网格，并使用 vertical-align：middle 使它无缝。

在这里运行： http://test.davewhitley.com/not-wp/debug/index.php

据我所知，css-columns + css不透明过滤在iOS中导致一个真正晦涩的bug。有趣的是，它只是在iOS中崩溃...我觉得没有人会遇到这个bug再次，因为它是如此晦涩。

我想要打破它下一天，提交错误...但我只听说提交到Safari，而不是iOS Safari。

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>

解决方案

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.

这篇关于CSS列使用：checked伪类时，在移动设备中出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！