Hello.
We just got live with Newspaper theme switching from another one.
Everythings ok except than the feature images are not displayed in mobile.
Not all mobile. We observed that on iPhone X and Android with 1920(height on portrait) resolutions.
This only occurs with template 8. All other templates work just fine on any mobile device.
I think it has to to something with JS, z-index or opacity.
Screenshot >> https://imgur.com/a/w8wktIk
Please advise!
Kind regards
Hi,
Could be, if you would provide a link to such a post I will inspect it and try to identify what exactly is causing the problem.
The template should work the same as this live demo post
– https://demo.tagdiv.com/newspaper/td-post-2015-awards-all-of-the-best-and-worst-moments-from-the-show/
Thanks
Hello.
Thanks for you response.
Here is a link: https://www.tilegrafima.gr/nea/sakellariou-ste-poioi-ton-odigisan-se-paraitisi/
Sometimes is shown sometimes it won’t.
This actually happens only on actual mobile device and NOT developer tools in desktop.
Kind regards
We made a few tests on some available iOS and also Android phones, for us the post background image loads no matter how many times we tried
– https://www.screencast.com/t/2rjUUsohgqI
– https://www.screencast.com/t/FhB5njSqzAIA
The post page does not have any errors that could be causing this problem as well. This template would be somewhat complex with the post header parallax effect, but that should not affect the loading of the featured image background on all devices.
Hello.
Have you tried to debug with iPhone 8 or X or any android with high density screen with 1080×1920 and over?
This is what I’m getting after one refresh or two.
Kind Regards
Well.
We are waiting to load over a minute and the image isn’t loading.
Its not happening every time but it is happening 40-50% percent of the times.
It seems like a bug to me.
Is it possible to disable the lazy loading on mobiles?
Or provide a different featured image layout for mobiles?
Kind regards
Hi,
The template design has some opacity transitions in the design for the top header part
– https://www.screencast.com/t/UbRUp2orZ1
There is a 2 second opacity transition for the background image, try removing this transition for mobile (Advanced CSS phones section)
body.single_template_8 .td-backstretch {
transition:none;
}
Check if this has any effect.
body.single_template_8 .td-backstretch { transition: none; opacity: 1; }
on screens under 768px seems to fix the issue.