Image loading 2x

[fbrugger]

Hi there

On this website https://silk-touch.ch/ I use a lot of backround images with fade-in effects. If I browse this website on my iPhone 16, it seems that all the images are loading two times. The images fade in, then disappear for a fragment of a second and then appear again. This was never the case before, as I tested the whole website also on my mobile phone. On my desktop computer and laptop, I don’t have this issue.
Can you replicate this issue on your mobile and what could be the case for this problem?

Thank you very much for your help!

Kind regards,
Felix

[Ismael]

Hello Felix,

Thanks for writing in.

We were not able to reproduce the issue on a browser device emulator. Unfortunately, we don’t have access to an iPhone 16. Would you mind providing a screenshot or a short clip of the image issue?

Best regards.

[fbrugger]

Hello Ismael

Thank you very much for your reply. Here is the link to the screencapture of my iPhone 16:

Thank you very much for looking into this.

Kind regards,
Felix

[fbrugger]

…I think it is not only the images, the colored areas with the text also flicker several times.

Thanks again,
Felix

[marc_a]

Hey Felix,

I tried to check your website on an iPhone device but couldn’t replicate the issue. Please try to clear your browser cache or use incognito mode to test it.

Thank you.

[fbrugger]

Hi Marc

Thank you very much for your reply. Please check this page for better recognising the issue:

Silk Touch Cosmetics - Silk Touch Cosmetics

Thank you very much for your help!

Kind regards,
Felix

[ruenel]

Hello Fleix,

It seems that both the Row and Column has the same effects. Please provide us with your WP credentials so we can check your element Effects settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[fbrugger]

Hi Ruenel

Thank you very much for looking into this. Here are the login information to my developement page, where you can make changes:

[ruenel]

Hey Felix,

This is what I am talking about:

The Row element inside the Column element has Effects while the container also has the Effects. Disable the Effect in the Row element instead.

Thanks.

[fbrugger]

Hi Ruenel

Thank you very much for looking into this. I am afraid, this is not the problem.

If I disable the fade in-effect in the row, there is no difference on my iPhone. And both the effects in the column and in the row are intended. In the column there is a background color, which fades in at a bottom offset of 0%. In the row is a image, which fades in at a bottom offset with 30%. This makes the image fade in over the backgrounf with a delay of 30% scroling down.

These two effects have always been working perfectly with previour versions of Pro.

Is there any chance you can investigate this issue or report it to your dev-team?

Thank you very much for your help.

Kind regards,
Felix

[ruenel]

Hello Felix,

I got confused with the Sections since there are a few.

Would you mind switching back the Effects and maybe we can just focus on a few sections while we are troubleshooting the issue?

Thank you in advance.

[fbrugger]

Hi Ruenel

Thank you very much for your reply. I have noticed, that this issue occures on all my other websites too. So maybe it is easyer to investigate my development page https://backup.showmyproject.ch/

For example on the startpage, there are columns is a row, ehich have only one effect. In column 40 there is only a fade-in effect but on my iPhone, this column with an image is fading in and flickering twice:

If you play around with the “Easing” of the effect-transition, it might have a better result of the double loading and flickering…

I will send you the login information in a secure note.

Thank you very much for your help!

Kind regards,
Felix

[ruenel]

Hey Felix,

I have made some changes to the Effects of the Column 40.

Instead of having a delay only 1ms, I made it to 100ms.

Please check it now.

[fbrugger]

Hi Ruenel

Thank you very much for your reply and for looking into this.

I have checked the page on my mobile and column 40 with a delay of 100ms works perfect. However, in column 44 I have a delay on 250ms and the effect is still loading double. Even if I set the delay in column 44 to 100ms, the effect is flickering 2 times.

There must be another problem with the effects…

Thank you very much for your help!

Kind regards,
Felix

[ruenel]

Hi Felix,

I have tested your site on my android phone. Unlike before, I am no longer seeing the flickering of the images. I would recommend that you set the delay to at least 100ms. Make sure to clear your caching plugins especially when WP Rocket is active. You MUST also clear your mobile phone browser cache or use private browsing mode before testing the site again.

Best Regards.

[fbrugger]

Hi Ruenel

Thank you very much for your reply. I have tested with my iPhone after clearing the cache of the mobile phone browser but I still only could see, that the image in column 40 is ok. Until I realized, that column 44, with a effect delay of 250ms is not the on mobile visible column:

The mobile column for this image is column 46, where the text is below the image. If I set the mobile column 46 to effect delay 100ms, the flickering is gone:

But why is the fade-in effect wit a delay of 0ms flickering, especialiy when 0ms is the defalt value of Cornerstone?

I have dozends of columns, images and texts if not hundreds on all my websites, which I have now to search and set the value to 100ms. I don’t think, this is the ultimate solution…

Is there no chance, you can inform your dev-team, to fix this issue?

Thank you very much for your help!

Kind regards,
Felix

[christian]

Hey Felix,

I agree that the solution is not convenient. However, this is a tricky issue which would take some time to figure out.

I’ll add this in our issue tracker to be queued for further investigation.

For now, we don’t have an immediate solution.

Thank you for understanding.