CSS Columns Bug — 使用 :checked pseudo class 时在移动设备上中断

Question

我正在构建一个仅使用 CSS3 来显示网格并过滤掉缩略图的作品集网站。

You can see what I've done here.

我通过使用 this tutorial 获得了过滤器功能并使用 :checked 伪类。

网格是使用 css3 列制作的，以创建无缝的响应式照片网格。我用了 Chris Coyier's example .

在大多数现代浏览器中一切正常，但在 iPhone 的移动 Safari 中却出现问题。经过进一步测试，它似乎也可以在 iPhone 的 Sleipnir 浏览器中使用，但在 Opera Mini 浏览器中可以使用。此外，它在适用于 iPad 的 iOS Safari 上执行完全相同的操作。

同样重要的是要注意，该错误不会因为浏览器宽度较小而发生。它在 Mac OSX Safari 5 上的小浏览器宽度下运行良好。

现在开始讨论这个问题: 在 iPhone 上查看时，一切看起来都很棒，直到您单击过滤器标签(网页设计、插图、字体、标识和打印)。单击标签后，没有任何东西会移动。只有缩略图的不透明度发生变化。例如，单击“身份”后，右栏中断并且图像似乎消失了。现在，单击“全部”，图像会重新出现在右栏中，一切看起来都和您第一次访问该页面时一样。

图像似乎落在图像的第一列下，在页脚下方并且看不见。

这是点击“身份”后假设的样子 — http://cl.ly/1M3F1t1N410s150h1o40

这是它实际上现在的样子 — http://cl.ly/0r1v0Z2c1f0I2U0X0T3m

更新: 删除 list-style: none;从我的 CSS 来看，它似乎改进了很多。我不知道为什么。仍然不能完美地工作。一些缩略图仍在消失。将继续努力。

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

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

如果您有兴趣，这里是我用于 :checked 伪类缩略图过滤的代码。

.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>

Answer 1

好的...简短的回答是我通过消除 css-columns 让它工作。我改为使用 inline-block 创建网格，并使用 vertical-align:middle 使其无缝。您也可以使用 float 来制作网格。

在此处启动并运行:http://test.davewhitley.com/not-wp/debug/index.php

据我所知，css-columns + css opacity filtering 在 iOS 中导致了一个非常隐蔽的错误。有趣的是它只在 iOS 中出现...我觉得没有人会再次遇到这个错误，因为它太晦涩了。

我很想有一天将其分解并提交错误...但我只听说过提交到 Safari，而不是 iOS Safari。