CSS Grid 在实际移动设备上无法正常工作的问题。 在 Chrome/Firefox 开发工具中进行测试时，代码运行良好

Question

EDIT: Guys, I figured it out. As the comments have suggested that I try debugging using Safari, which I hadn't done, I found that for whatever reason in my live code my.gallery-grid class in CSS had a "height: 100%" that was throwing things off for whatever reason. So I erased that and changed my.card to have a height of auto instead of leaving the "max-height: 100%". That seemed to work perfectly and is now working within Safari iOS, Chrome, and Firefox. Thank you Ben Souchet for the suggestion!

I recently finished creating an image gallery that uses CSS Grid and works perfectly fine when I use the dev tools on Firefox and within Chrome. It's only when I test the site on my actual phone (iPhone) when the gallery seems to crash. Works great on desktop.

Here's what it looks like on actual mobile

Here's what it's supposed to look like and how it looks when viewed through chrome/firefox dev tools

My HTML code:

            <div id="trigger-view-button" class="gallery-grid">
                <div class="card">
                    <img src="css/images/gallery/gallery-img1.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img2.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img3.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img4.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img5.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img6.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img7.jpg" alt="">
                </div>
                <div class="card">
                    <img src="css/images/gallery/gallery-img8.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img9.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img10.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img11.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img12.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img13.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img14.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img15.jpg" alt="">
                </div>
                <div class="card-hidden">
                    <img src="css/images/gallery/gallery-img16.jpg" alt="">
                </div>
            </div>

My CSS code:

/*------- Gallery Photos -------*/

.gallery-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: auto;
    padding: 0 1.5em;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #353535;
    font-size: 3rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    max-height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms, opacity 1200ms;
    overflow: hidden;

    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card:hover {
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    transform: translateY(-3px) scale(1.1);
}

.card-hidden {
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.card-fade-in {
    height: auto;
    visibility: visible;
    opacity: 1;
}

My JS code (this allows the user to load about 8 more pictures onto the grid after clicking on a load more button. This explains why there's a card-hidden/card-fade-in class):

$("#loadMore").click(function () {
    $(".card-hidden").toggleClass("card-hidden card card-fade-in");
    $("#loadMore").fadeOut("slow");
});

I've been looking around for a solution but it seems to be really tricky to find something when the dev tools show the grid working great while actual mobile does not. I have also checked for compatibility and safari seems to be compatible with the grid settings I'm using.

Any suggestions would be great. Thanks in advance.

Answer 1

I placed an edit on the question but I'll place the answer here too in order to "solve" the question.

I figured out the issue. As the comments have suggested, I tried debugging using Safari, which I hadn't done, and I found that for whatever reason in my live code my.gallery-grid class in CSS had a "height: 100%" that was throwing things off for whatever reason. So I erased that and changed my.card to have a height of auto instead of leaving the "max-height: 100%". That seemed to work perfectly and is now working within Safari iOS, Chrome, and Firefox. Thank you Ben Souchet for the suggestion!