Unexpected scrolling behavior in mobile Safari

I am trying to style a chatbot, but I am experiencing some unexpected scrolling, or lack their of, behavior in a div, but only in only in iOS/mobile Safari.

The expected behavior is to have the div scroll once a new element is added or made visible. This is the case in Chrome and desktop Safari. But in mobile safari it doesn't occur. Here is a screen shot of the problem:

Here's a live example, note this works perfectly on desktop Safari and Chrome - the issue is only occurring on iOS/Mobile Safari:

function randint(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}



function update_transcript(party, entry, time) {

        time = time.toLocaleString('en-US', {timeStyle: 'short'});

    if (party == "Human: "){
        document.getElementsByClassName("transcript")[0].innerHTML += `<div class="flex justify-end">
                            <div class="mt-3">
                                <div class="flex justify-end">
                                    <div class="bg-white shadow border border-gray-100 text-right rounded-l-lg rounded-tr-lg w-fit max-w-xs py-2 px-3">`
                                        +entry+
                                    `</div>
                                </div>
                                <div class="p-1 text-right text-xs text-gray-400">
                                    <span class="receipt font-semibold hidden">Read</span> <span>`+time+`</span>
                                </div>
                            </div>
                        </div>`;

    }else if (party == "BOT: "){
        document.getElementsByClassName("transcript")[0].innerHTML += `<div class="flex justify-start">
                            <div class="mt-3">
                                <div class="flex justify-start">
                                    <div class="bg-gray-100 text-left rounded-r-lg rounded-tl-lg shadow w-fit max-w-xs py-2 px-3">`
                                        +entry+
                                    `</div>
                                </div>
                                <div class="p-1 text-left text-xs text-gray-400">
                                    <span>`+time+`</span>
                                </div>
                            </div>
                        </div>`;

    }
}


    update_transcript('BOT: ', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum augue eu scelerisque finibus. Proin tincidunt elit a justo tincidunt porttitor. Mauris ac porttitor nulla. Cras hendrerit sem eu risus hendrerit, vel bibendum dolor congue. Pellentesque id efficitur leo. Nullam non elit nunc. Ut sit amet magna at purus sollicitudin lobortis. Aenean sed massa tortor. Integer lobortis dui massa, quis mollis elit porttitor at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.?', new Date());



const query = document.getElementsByClassName("query")[0];

const form = document.querySelector('form');
form.addEventListener('submit', event => {
    event.preventDefault();

    document.getElementsByClassName("submit-query")[0].classList.add("hidden");


    //updates the chat window
    update_transcript('Human: ', query.value, new Date());

    // clear query text bos
    document.getElementsByClassName("query")[0].value = "";



var data = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum augue eu scelerisque finibus. Proin tincidunt elit a justo tincidunt porttitor. Mauris ac porttitor nulla. Cras hendrerit sem eu risus hendrerit, vel bibendum dolor congue. Pellentesque id efficitur leo. Nullam non elit nunc. Ut sit amet magna at purus sollicitudin lobortis. Aenean sed massa tortor. Integer lobortis dui massa, quis mollis elit porttitor at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.";

        // adds a read receipt
        document.querySelectorAll('.receipt')[document.querySelectorAll('.receipt').length - 1].classList.remove("hidden");


        if (data) {

            // generated a random number between 1 and 4 seconds for a response time (when they start typing)
            let response_speed = randint(1000, 4000);

            // sets how long AI types for 50ms per character
            let typing_speed = (data.length * 40);


            setTimeout(function(){

                document.getElementsByClassName("typing-indicator")[0].classList.remove("hidden");

                setTimeout(function(){

                    // updates the chat window with the response
                    update_transcript('BOT: ', data, new Date());

                    document.getElementsByClassName("typing-indicator")[0].classList.add("hidden");

                    document.getElementsByClassName("error")[0].classList.add("hidden");

                }, typing_speed);

            }, response_speed);


        }


});

.typing-container{
    height: 10px;
    width: 40px;
}

.typing {
    position: relative;
}
.typing span {
    content: "";
    animation: blink 1.5s infinite;
    animation-fill-mode: both;
    height: 10px;
    width: 10px;
    background-color: rgb(156, 163, 175);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
.typing span:nth-child(2) {
    animation-delay: 0.2s;
    margin-left: 15px;
}
.typing span:nth-child(3) {
    animation-delay: 0.4s;
    margin-left: 30px;
}

@keyframes blink {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
    <script src="https://cdn.tailwindcss.com"></script>
  
  <body class="bg-gray-100 px-3 pt-3">

    <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all h-96 w-96">

        <div class="flex flex-col justify-between h-full">




            <div class="flex flex-col-reverse overflow-y-scroll p-3 h-full">

                <div class="typing-indicator flex justify-start hidden">
                    <div class="bg-gray-100 rounded-lg p-3 mb-4">
                        <div class="typing-container">
                            <div class="typing">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="error flex justify-center p-3 hidden">
                    <p class="error-message text-red-600 text-sm text-center font-medium">We apologize for the inconvenience, our chat encountered an error. Please try again later.</p>
                </div>

                <div class="transcript"></div>

            </div>


            <div class="flex flex-col">
                <div class="relative border-t border-gray-100 p-1">
                    <form class="mb-0">
                        <input type="text" placeholder="Message..." maxlength="255" class="query bg-white outline-none w-full pl-6 pr-12 py-3"/>
                        <span class="absolute right-0 pr-3">
                            <button type="submit" class="submit-query pr-3 py-3 w-9 cursor-pointer">
                                <svg class="fill-current" viewBox="0 0 20 20">
                                    <path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z" />
                                </svg>
                            </button>
                        </span>
                    </form>
                </div>
            </div>





        </div>

    </div>



</body>

I need to have the div scroll to the bottom when new content is added or made visible. How can I fix this on mobile/iOS Safari?

from Unexpected scrolling behavior in mobile Safari