javascript – CSS Rework Animation on iOS solely work appropriately after house display/locking then reopening browser

I’ve a component in html styled like a horizontally scrolling LED show:

.led-display {
    width: 100vw;
    peak: 50px;
    background-color: black;
    overflow: hidden;
    place: relative;
    show: flex;
    align-items: middle;
}

.scrolling-text {
    white-space: pre;
    coloration: rgb(255, 94, 94);
    font-size: 24px;
    font-family: 'Scoreboard';
    place: absolute;
}

.scrolling-text,
.message {
    text-shadow:
        0 0 5px #f00,
        0 0 10px #f00,
        0 0 20px #f00,
        0 0 40px #f00;
    will-change: rework;
    animation-name: scroll-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes scroll-left {
            from {
                rework: translateX(100vw);
                -webkit-transform: translateX(100vw);
            }
    
            to {
                rework: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

I’m utilizing javascript to fetch the info for the every message, add spacing between them, and calculate the length of the animation – all inside a DOMContentLoaded occasion listener:

fetch('/static/messages.txt')
        .then(response => {
            if (!response.okay) {
                throw new Error(`HTTP error! Standing: ${response.standing}`);
            }
            return response.textual content();
        })
        .then(knowledge => {
            const messages = knowledge.break up('n').filter(msg => msg.trim() !== ''); // Break up traces and take away empty ones
            const scrollingText = doc.getElementById('scrollingText');

            // Add a big house between every message
            const spacedMessages = messages.map(msg => msg + ' '.repeat(20)).be a part of('');
            console.log("spaced the messages")

            // Look forward to the browser to calculate the width
            requestAnimationFrame(() => {
                const textWidth = scrollingText.offsetWidth; // Measure the complete width of the scrolling content material
                const displayWidth = doc.querySelector('.led-display').offsetWidth;

                // Calculate animation length (e.g., 0.05 seconds per pixel)
                const animationDuration = (textWidth + displayWidth) / 100; // Alter velocity as wanted

                // Replace the CSS animation length dynamically
                scrollingText.model.animationDuration = `${animationDuration}s`;
                const reflowTrigger = scrollingText.offsetHeight; // Learn a property to set off a reflow

                // Add exact padding to keep away from lengthy pauses
                scrollingText.model.paddingRight = `${displayWidth}px`;
            });

            scrollingText.textContent = spacedMessages;
            console.log("appended textual content content material")
        })
        .catch(err => {
            console.error('Error loading messages:', err);
            doc.getElementById('scrollingText').textContent="Error loading messages.";
        });

The problematic behaviour that I’m experiencing solely on iOS gadgets (to date), is that the textual content content material begins to scroll from proper to left as anticipated, however not lengthy into the animation, the textual content that has crossed over the rightmost edge into the seen show disappears, and one or two fractured items of the remaining textual content move over the sting into the seen show and likewise disappear, normally after one or two of these items, no extra of the prolonged textual content reveals up.

Probably the most surprising a part of the issue is that when the web page is first loaded, or whether it is refreshed, the issue exists; however if I swipe to go to the iphone house web page and shortly come again to the browser, or if I lock the system and unlock it once more, the animation performs noticeably faster than it did earlier than, and not one of the disappearing textual content points are current!

If anybody has any expertise with this form of situation I might be so grateful to listen to what I may enhance to repair this – thanks.

In order you could possibly inform in my shoddy javascript, I used to be seeking to set off this behaviour within the code, I’ve not had any success although and I am unsure what the right time period is for that behaviour – AI says it’s a ‘reflow’.

I attempted so as to add some code after the js to show visibility on and off once more to see if that retriggering would assist however alas no:

scrollingText.model.visibility = 'hidden';

    scrollingText.offsetHeight;

    scrollingText.model.visibility = 'seen';

I added the webkit prefixes in CSS, those I knew didn’t work and I struggled to seek out data that appeared significantly helpful.

I attempted this on a number of iOS gadgets so I’m sure this isn’t a CSS caching situation and i am pretty sure this ought to be purposeful on iOS 17; i’ve seen different web sites on my telephone with this sort of ingredient working simply wonderful.