As I work on developing a web application, I encountered a peculiar issue. On my desktop browser, the images load perfectly fine. However, when I try to access the site using my mobile browser, all I see is a gray outline of the image.
If you'd like to test this bug yourself, simply choose "Alien" from the dropdown menu named "Shape:", then click on "clear and apply". Finally, tap on any of the black squares. You'll notice that it transforms into an alien head on a desktop browser, but fails to do so on a mobile browser.
Feel free to check out the live site here.
You can also view the code on Codepen here.
.alienItem {
content: url(/images/alien.png);
height: 55px;
width: 55px;
justify-self: center;
border-radius: 50px;
margin-top: 5px;
}
Please note that while the Codepen link does not include the image files, it may help you in troubleshooting the issue.