My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves in bizarre ways. At times, only a portion of one picture appears on top of another, creating an unintended visual spectacle.
To witness this issue for yourself, feel free to explore the problem on the jsfiddle link provided below and try refreshing the page multiple times quickly.
The images used are pictures of people's faces, which admittedly results in a comical display. However, despite the humor, fixing this bug is essential. My hunch is that the problem lies in my approach to constructing the grid randomly using 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);
});
The CSS code implemented for styling the grid is as follows:
#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; }
}
https://i.stack.imgur.com/KFTim.png
This puzzling situation leaves me wondering about the root cause behind these unexpected occurrences.
An updated demonstration can be found on jsfiddle:
https://jsfiddle.net/gux8py6f/7/
https://jsfiddle.net/gux8py6f/7/embedded/result
To experience the issue firsthand, visit the provided jsfiddle link and experiment by rapidly refreshing the page.