Blinking elements on mobile

[markusp80]

Hello! I have an issue on all pages of my website (www.shootit.se). I am using an iPhone 15 Pro with Safari and iOS 17.0.3. Not all, but most elements blink when they are loaded and animated.

I have also tried it on an iPhone 11, with Safari and iOS 15.6.1, and then there are no blinks.

Do you have any idea on what could be causing this? I have tried emptying cache etc. This issue was there before I installed W3 Total Cache and Cloudflare CDN as well.

You can look at a screen recording of the start page on my iPhone 15 here: https://www.shootit.se/download/blinking-elements.mp4

[Daryl_Shaw]

Yes, same issue at my sites. Animated objects flash once after animation is complete…

[ruenel]

Hello @markusp80,

Thanks for writing in! What is the Safari browser version in your iPhone 11 and in your iPhone 15 Pro? I would also recommend that you use Chrome or MS Edge mobile and test the site on your phone just to compare if the issue is only happening with the latest iOS version.

Best Regards.

[raye]

Just a guess: try to add the following CSS to your flickering elements and all ist children.
So if a text element does flicker, try the following element CSS:

$el, $el * {
  -webkit-backface-visibility: hidden; 
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
}

Im not sure with the last line. I recommend trying with and without that last line since it can lead to new problems, especially if you rotate elemnts into 3d space z axis and the 3d objects might intersect.

[tristup]

Hi @raye,

Thanks for sharing a probable solution here. Hope it helps.

[markusp80]

It seems like the version number it is not specified in the info about Safari on the iPhone’s settings, but according to what I could Google, the Safari version correlates to the iOS version, thus:
iPhone 11 - iOS 15.6.1 - Safari 15
iPhone 15 Pro - iOS 17.0.3 - Safari 17

I have now also tested the website in these configurations with the following results:
iPhone 11 - iOS 15.6.1 - Chrome - NO BLINKING
iPhone 11 - iOS 15.6.1 - MS Edge - NO BLINKING
iPhone 15 Pro - iOS 17.0.3 - Chrome - BLINKING
iPhone 15 Pro - iOS 17.0.3 - MS Edge - BLINKING

So it must be an iOS 17 issue then.

Another note: If you look at the three testimonials of the start page, or the three testimonials on this page: https://shootit.se/matfotograf-i-orebro it is only the first columns that blinks after the animation has loaded, not the second and third column. So it seems like it is the first object in every row?

I have now also added the code from @raye to the first testimonial column, the image with grey logotypes and the green button. (on this page https://shootit.se/matfotograf-i-orebro). The only difference is that the first testimonial column now blinks in a slightly different way, half of it gets some kind of overlay for a short moment. See screencapture here:
https://www.shootit.se/download/blinking-elements-2.mp4

The image with the logotypes and the green button blinks the same way as before.

This is the way I added the code, is it the correct way to do it?

Any ideas for a solution, or what could be causing it?

[raye]

Ok the new overlay error on the circle images is due to the last line of the CSS -webkit-transform-style: preserve-3d;
As described above the circle images are rotating on the z-axis so that they intersect with background element.
So I would suggest to remove that line.

So it seems the other two lines of CSS does not solve the original blinking effect?
Unfortunately I do not have an iOS 17 device yet to reproduce this.

[markusp80]

I removed the last line from the custom CSS on all three elements where I had added it on the page. Emptied all caches. Correct as you said, the “overlay-blink-issue” disappeared. But it does not remove the blink that was there before, so now it behaves the same way as without this CSS code.

Thanks for you effort though!

@tristup @ruenel is this something you are looking into further? I would assume @Daryl_Shaw also has iOS 17 on his device, if he can see the same issue. It is of course a newly released verison of iOS, but as time goes by, more and more iPhone users will will start using it, and (I assume) experience the same issue.

[charlie]

Can I get a template from someone having this issue? I can definitely see it on the site in question, but can never seem to recreate these effect issues. Pro 6.4 should handle scroll animations better so let me know if you see improvements from this as well when we release.

[Daryl_Shaw]

I confirm: Blinking issue only at my iOS 17 Device (with all browsers: Chrome, Firefox, Safari). Not on another device with last iOS 16.7.2

[markusp80]

What do you mean by template? You guys can get my login credentials in a hidden message, right? Only issue is that I am using 2-factor authentification, so we would need to decide on a date and time in that case, if you want to take a look. You’re in the US? Then it’s at least an 8 hour time difference, and I am going to bed now : ) But let me know if you want to do it that way.

[ruenel]

Hello @markusp80,

Can you please save the sections as a template and then send it to us so that @Charlie, our lead developer can investigate further on the issue.

Thanks.

[markusp80]

Ok, I think I got it right. Try and download it here: https://shootit.se/download/3-testimonials-section.tco

This template is made from a section on the same page I’ve shown above: https://shootit.se/matafotograf-i-orebro, the three testimonial columns where only the first one is blinking when it has loaded. The second and third behaves as normal. @ruenel @charlie

[charlie]

@markusp80

Thanks for the template. I’m not sure we’ll fix this issue the first time, but 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. I’m hoping it fixes all the iOS 17 issues as well, it seems related. Let us know if you still have issues after the upgrade. Have a great day!