javascript - 移动用 JavaScript 构建的故障图像网格

Question

我使用 JQuery 构建使用 Flex Boxes 设置样式的图像网格的 HTML。在桌面上运行良好。在移动设备上，我得到了图像跳跃、重叠和相互重复的奇怪结果。有时只有一张图片的一部分再次出现在另一张图片之上。

您可以使用我在下面提供的 jsfiddle 重现该问题并快速刷新页面多次。

这些是人脸图像，所以结果确实很搞笑，但我需要修复这个错误!我猜这与我如何以随机顺序使用 JQuery 构建网格有关:

var a={};
$(document).ready(function(){
    a.team = [
        {'name':'John','title':'Creative Director and Lead Designer','img':'John.jpg'},
        {'name':'Nate','title':'Director of Game Day Operations','img':'Nate.jpg'},
        {'name':'Morgan','title':'Spokesperson','img':'Morgan.jpg'},
        {'name':'Tom','title':'Lead Web Developer','img':'Tom.jpg'}
    ];

    for(member in a.team) a.team[member].ran = Math.random();

    a.team.sort(function(a, b) { return a.ran - b.ran; });

    a.h = '';
    for(member in a.team){
        var h = '';
        h += "<a class='tm-area ongrey' href='/#'>";
        h += "  <div class='tm-pic-area'>";
        h += "      <img src='images/team/"+a.team[member].img+"' class='tm-pic g'>";
        h += "      <img src='images/team/Portrait Frame.svg' class='tm-mask'>";
        h += "  </div>";
        h += "  <div class='tm-info-area'>";
        h += "      <div class='tm-info-name goth'>"+a.team[member].name+"</div>";
        h += "      <div class='tm-info-title euro'>"+a.team[member].title+"</div>";
        h += "  </div>";
        h += "</a>";

        a.h += h;
    }

    $('#icon-grid').html(a.h);
});

这是 CSS:

#icon-grid{
    float: left; display: block; width: 100%;  margin: 10px 0;
    display: -webkit-flex;  display: flex;
    -webkit-justify-content: space-around; justify-content: space-around;
   -webkit-align-content: stretch; align-content: stretch;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.tm-area{ width: 180px;  margin: 10px; cursor: pointer; display: block; 
    text-decoration: none; color: black;}
.tm-pic-area{ width: 180px; height: 180px; }
img.tm-pic{ width: 178px; height: 178px; margin:1px; 
    position: absolute; z-index: 1; float: left;
    -webkit-transition:-webkit-filter 0.3s ease-in-out;
    -moz-animation: -moz-filter 0.3s; /* Firefox */
    -o-animation: -o-filter 0.3s; /* Opera */
}
.g {
    filter:gray;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
}
img.tm-mask{width: 180px; height: 180px; position: absolute; z-index: 2; float: left;}
.tm-info-area{ width: 100%; }
.tm-info-name{ width: 100%; font-size: 20px; font-weight: bold; text-align: center; 
    border-bottom: 2px solid black; margin-bottom: 4px; padding-bottom: 2px; }
.tm-info-title{ width: 100%; font-size: 14px; text-align: center; 
    font-weight: bold; margin-bottom: 4px; }

@media screen and (min-width:0px) and (max-width:400px){
    .tm-area{ width: 140px; margin: 5px; }
    .tm-pic-area{ width: 140px; height: 140px; }
    img.tm-pic{ width: 138px; height: 138px; }
    img.tm-mask{width: 140px; height: 140px; }
    .tm-info-name{ font-size: 16px; }
}

为什么这会发生在我身上？

更新了 jsfiddle 示例

https://jsfiddle.net/gux8py6f/7/

https://jsfiddle.net/gux8py6f/7/embedded/result

您可以使用此 jsfiddle 并通过快速刷新页面多次来重现该问题。

Answer 1

问题最终是灰度 CSS 属性的不可靠性。

filter          : gray;
-webkit-filter  : grayscale(1);
-moz-filter     : grayscale(1);

因此，为了获得我想要的悬停效果的灰色到彩色，我现在有 2 个图像在彼此之上；一种颜色和一种灰色。当鼠标悬停时，我使用 JQuery 设置顶部灰色图像的不透明度动画，以显示下方图像的彩色版本。