使用 JavaScript 构建的移动故障图像网格答案

【问题标题】：Shifting Glitchy Image Grid Built with JavaScript使用 JavaScript 构建的移动故障图像网格
【发布时间】：2018-12-13 21:31:47
【问题描述】：

我使用 JQuery 构建使用 Flex Box 设置样式的图像网格的 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 并通过快速刷新页面多次来复制问题。

【问题讨论】：

你能为此制作一个小提琴吗？
@kravisingh 当然。提醒：在桌面上工作正常。错误在手机上。具体来说，iPhone Safari 或 Chrome。
仅供参考，它在 Android 上的 Chrome 中运行良好。此外，jsfiddle.net/gux8py6f/5/embedded/result 将是人们在移动设备上结账的更好链接。

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：