Bug 273895 – Simple text animation with transform: translateX() is broken on iOS and iPadOS (maybe MacOS, can't test it)

• Status: NEW
• Component: Animations

[Cesare Gramatica]

Created attachment 471322 [details]
Video of the bug happening (reload of website -> home -> back to website)

Hello,

Me and my friends are hosting a very very simple and dumb website for the soccer team of our hometown, everything's mostly fine but there seems to be a little bug/glitch on some Browsers on iOS and iPadOS (maybe all of the browsers available, haven't tested).

As you can see from a video I have attached, a very simple animation:

"
.header h1 {
    animation: textRightToLeft 10s linear infinite;
}

@keyframes textRightToLeft {
    from {
        transform: translateX(100vw);
        -moz-transform: translateX(100vw);
        -ms-transform: translateX(100vw);
        -webkit-transform: translateX(100vw);
        -moz-transform: translateX(100vw);
        -o-transform: translateX(100vw);
    }
    to {
        transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }
}
"

is not working properly on iOS and iPadOS.

At first at least, infact if I reload the webpage, the animation is wrong, if then I return back to the home, and then again back into Safari the animation is correctly rendered and the text is animated through the entire width of the screen.

The website is: www.lamezzatorre.com and I'll try to avoid changing anything on it until you answer me, but I've tried many workarounds and I can't find one working (and I still am trying to fix it)

I even tried animating using JS instead of CSS and while personally had no problems whatsoever and thought I had found a solution, some of my friends said it wasn't working still on their phones (albeit maybe on older versions of iOS).

Personally I'm using an iPhone 15 PRO with the latest versions of iOS and Safari installed, and an iPad Air with the latest versions of iPadOS and Safari installed.

Thanks for your time,
Cesare.

[Alexey Proskuryakov]

Thank you for the report! Could you please attach a complete test case, or link to one?

[Cesare Gramatica]

Created attachment 471353 [details]
Complete test case with two iterations of the animation not working and two with the animation working

[Cesare Gramatica]

For the record, I managed to fix temporarily using JS.

Animating the text like so:
"
window.onload = function() {
    myText.animate([
        { transform: `translateX(100vw)` },
        { transform: `translateX(-100%)` }
    ], {
        duration: 10000,
        iterations: Infinity
    });
}
"
instead of using CSS, seems to work properly.

[Alexey Proskuryakov]

The new attachment is a video, could you please attach your HTML test case, so that we could reproduce and debug the issue?

[Cesare Gramatica]

Created attachment 471361 [details]
ENTIRE WEBSITE FOLDER ZIPPED

Shoot sorry, didn't understand what you meant.

Honestly, you can have the entire folder of the deployed website, I don't really care., check out whatever you need to.

Thanks, bye.

[Alexey Proskuryakov]

Thank you. The reason why I've been asking for a test case was that I didn't notice the link to the website in description, adding it to the URL field for better visibility now.

I don't think that I can reproduce with iOS 17.5 beta. Would it be possible for you to re-test with it, or once it ships? It's also possible that I don't understand what issue you are seeing. AFAICT it's about the marquee line at the top, and text being drawn at a different location from where it actually is (as demonstrated by making a selection). Please clarify if that's a misunderstanding!

[Antoine Quint]

Looks fine on Safari Technology Preview 194 on macOS as well. That said a script-originated animation (likely using `Element.animate()`) is used and not the CSS Animation reported in the report, which I think is supposed to be a workaround.

But I also tried the zip'd copy of the website attached to this email which does use the CSS Animation and it looks fine.

On iOS 17.5 I'm also seeing the attached website behave as expected.

Cesare, which version of iOS did you test for this? If you're not already on the latest released version of iOS, could you update and let us know if this addresses the issue?

[Alexey Proskuryakov]

The report said latest, which would be 17.4.1 at this time.

[Alexey Proskuryakov]

And of course iOS 17.5 has shipped later today.

[Cesare Gramatica]

Hello Alexey

Correct, the "bug" is the marquee not being rendered in the correct position (initially at least) and correct, I seemingly found a workaround with JS to this weird issue.

It's 21:30 where I live and I've set up my iPhone to update to iOS 17.5 tonight, I'll try and find the time to retest this issue in the next few days and I'll come back to you.

To be completely honest tho, I think I'll keep my workaround with JS online fow now, as I'm not really sure of how many iPhone/iPad/Mac users update their OS regularly.

Thanks for your help,
Cheers

[Alexey Proskuryakov]

This is totally reasonable. Thank you for helping us improve WebKit, and sorry that it's not straightforward enough with us being unable to reproduce so far.

[Radar WebKit Bug Importer]

<rdar://problem/128151012>

[Cesare Gramatica]

Hello Alexey,

sorry for making you wait, I've just tested with my Iphone 15 Pro updated to iOS 17.5 and I still see the same issue, with the marquee NOT being rendered in the correct position.

I've checked and Safari is updated to the latest version as well.

At the domain www.lamezzatorre.com I'm still using my workaround with JS, so you won't be able to test it there. I've tested this by reverting back to a CSS animation for a few minutes and as I've said, It's not working still.

Thanks.

[Antoine Quint]

Cesare, can you confirm that this reproduces for you with the zip archive you had already uploaded (https://bugs.webkit.org/attachment.cgi?id=471361). Thank you.

[Cesare Gramatica]

Yes, that's the "old" code, which uses CSS to add the animation to the marquee.

Earlier today I tried to reapply it to my website and I was still seeing the same issue you can see in the video: https://bugs.webkit.org/attachment.cgi?id=471353

If I have to I can reapply that code directly on the website online for a few days so that you can check more easily