Hello! I have written two other forum posts about this issue since the beginning of November last year:
I just updated to iOS 17.3.1 on my iPhone 15 Pro. The blinking is still there.
@ruenel @charlie Do you have any updates/news about this issue? Is it planned to be fixed in an upcoming sprint, or however you work?
Hello!
Any news? It’s been over three months since I wrote about this issue the first time, a thread that was finished with a reply from you saying:
“we’re going to try something in Pro 6.4.1 and you hopefully shouldn’t have that position flickering when it reaches the end of the animation”
It is now version 6.4.3 of Pro and the issue is still there on iOS 17.3.1.
Can you at least give me some kind of notification if this will be fixed or not? I have been waiting patiently. If this is too small of an issue, and you won’t fix it, please just be honest and let me know so I can remove the animations. Right now they are doing more harm than good for the user experience of my website.
Best regards, Markus
Hey Markus,
Our developers are still investigating the issue.
Please bear with us.
I haven’t really been able to recreate your issue in iOS 17 even when grabbing a template from your site. Let’s try a few things.
In the meantime I would probably just try the guides outlined here to remove animations on just mobile since it seems to be isolated to that.
Let me know if you have any other ideas on what might be happening or any questions. Have a great weekend.
Hi! I created a new page from scratch here: https://shootit.se/blinking-elements-test/
On that page, the blinking does not appear on mobile (iPhone 15 Pro, iOS 17), so I don’t really know what is causing it. The section with three testimonials is copied from the page where I created it.
Could you please tell me exactly where this custom CSS you’re referring to is located? I am not really sure on where/how to remove it, or what it does. The blinking issue is present on all my pages.
I read about the code to deactivate the animations on mobile only. Where do I paste that code? Thanks.
Okay, well narrowing it down to something on the homepage is a good start. Maybe something with the header, or something that happens when there is a lot on the page. Can you send me credentials so I can export that homepage to my site?
So to add that CSS, at the very bottom of Cornerstone there is going to be a code editor icon. Clicking that and then navigating to the “Global CSS” tab in the window you’ll be able to add custom CSS to your entire site. That mobile code in that thread would go here. Let me know if you have any questions.
Well, not only on the homepage. It’s on every page that’s live on my website right now, where I have used animations. But, not ALL animated objects/images/headlines, which is weird.
Here is a screencapture from an iPhone 15 Pro with iOS 17.3.1 and Safari: https://www.shootit.se/download/shootit.se-blinking-elements.mp4
As you can see, the blinking only occurs when there’s an animation, and it always blinks when the animation is done. But not on ALL elements that are animated.
I have deactivated two-factor authentification now, and will send you my login credentials in a hidden note. Let me know when you have exported the homepage so I can activate 2FA again and try adding the CSS code.
Okay I’ve grabbed what I’ve needed. You can turn back on 2FA. I’ll keep you updated on what I find. Have a great day.
I have the same issue on mobile. As soon as an animation element (such as “fade in up”), it blinks. Every single element does this. It’s extremely annoying.
From what I can gather Safari really doesn’t like having opacity changes as an animation keyframe. It’s a common issue I see in other posts around the net. So all the “fade in up” type of effects are going have this flicker happen. We’re going to change how this works, however it probably won’t get added till Pro 6.5 so we can have a beta testing period. I also don’t think these fade effects adhere to the opacity settings.
@markusp80 On your site the following would prevent the flickering for me in the text elements. It happens so fast you probably won’t even notice.
Let me know if I can check anything else for you. Have a great day.
.x-text {
opacity: 1 !important;
}
CSS animation for reference.
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation-name: fadeInUp;
}
Hi! Sorry for the late answer.
I tried the code for preventing flickering in the text elements, but this just resulted in more awkwardness and other issues that looks even worse, so I skipped that.
Instead, I tried to change the animation to “Slide in up” instead of “Fade in up”, which removes the fade part of the whole thing, which looks like is what’s causing the blinking issue. And this works better for sure, and the effect is almost the same. The blinking is gone on almost all elements.
Only one very irregular thing though. And that’s the opacity of the background image in the first one or two of these identical six boxes I have on my start page. On the first one or two boxes, that opacity starts at 100% and shows for like half a second or maybe even less, then it goes down to the intended opacity. But it doesn’t seem to behave the same way every time the page is loaded. I don’t know… It seems for sure that Pro, iOS17, Safari and opacity changes don’t really work perfectly together.
Anyways, I can live without the fade effect for now so I will just change the animation type throughout my site. Thanks.
I’ll take a look and make sure that opacity is working in your background images when we do these changes. They are probably related to the text opacity issues. Thanks for the info.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
