Images visible only after click (after move to ssl/https) on iPhone

I have a really odd problem after switching a site to ssl/https.

Everything works as it should and I have no mixed content warnings anywhere on the site.

However it seems that pages created using tagdiv-composer has an image-issue on iPhone (Safari browser).

On computer browsers images shows up as excpected. However on Safari (on iPhone) the top images only shows up the second I touch on either the menu- or search-icon. The images seems to load correctly but don´t get displayed untill something else is loaded as well.

See: https://www.baresolutions.se/ogonbryn-fransar/ for reference. The issue only occur (as far as I can tell) on iPhone in Safari browser.

I have done some more testing with this and it seems to be an issue that occurs when an image is (1) centered and (2) added through tagdiv composer. The site has four pages for beauty-treatments, linked below:

https://www.baresolutions.se/vaxning/
https://www.baresolutions.se/laser-diod/
https://www.baresolutions.se/makeup/
> https://www.baresolutions.se/ogonbryn-fransar/ <

The last one of theese (ogonbryn-fransar) has the image alignment set to center/middle using the normal text with title block. The other (first) three ones has the alignment set to “no alignment”. The issue described only happens on the last one (with the center alignment).

It seems this appear not only in Safari, but also in Chrome on mobile devices. I have only tested with iPhone so far though. Further more this doesn´t happen every time the page is loaded. Sometimes the picture loads fine, and sometimes it disappears only to be shown as soon as i double tap or bring out the page-menu.

Can you replicate the issue? I have tried clearing all cashe and tried with several different iphones. The issue is there on all of them.

That is so odd. See theese pictures for how it looks on my broswer (the top image is the aimage aligned center, the bottom one has alined none): https://imgur.com/a/nt7sN

When the images is aligned middle/center it doesn´t show up (it loads though, so as soon as I click the menu button the image shows up). Tested on an Android-phone now and there it seems to work. So far I have recreated the issue on iPhone SE and iPhone 6S (both in Safari and Chrome).

Can you find any errors in the code?
Could it somehow be some kind of old page cashe stuck in either the phones or the page itself? Have tried removing cashe in browsers, using only 4G instead of Wi-Fi and also used incognito-mode on both Safar and Chrome. But the issue is still present on the image that has the center alignment :-/

• This reply was modified 8 years by MrOrsh.
• This reply was modified 8 years by MrOrsh.

I have now done some more extensive testing. The issue is never presented on android browsers, only iPhone.

I have verified the issue on two other iPhones that has never been connected to either my WiFi or been to the page it self.

It does not happen all the time. Far from it even. However it seems easier to replicate when I go to the homepage (https://www.baresolutions.se) and select the menu followed by “Behandlingar & Priser” then select “Ögonbryn & Fransar”.

I also created a live test page (called “test”). This can be found if you search for “test” using the built in search function on the page.

Accessing the ögonbryn… and test-pages directly seems to produce the issue very rarely, however accessing them through either the menu or search-function makes issue appear.

It also helps to close the current tab in between each try and also switch to private/incognito-mode between each try.

Sorry about being so persistent about this, but it is annoying the crap out of me that I can’t solve it :-/

Glad the issue could at least be reproduced. I haven´t found out why it happens. However I have found out exactly _when_ it happens. The conditions needs to be as follows:

• Must be using tag-div-composer.
• Must place an image in either a Column text, Text with Title or Raw Html without any additional text or other images.

As soon as I add any other element with the picture (paragraph text, other image etc.) the issue completely dissapear. Adding a caption to the picture also makes the issue go away.

I have now added captions to every image to solve the problem temporarely.

This however brings out another question. I realise I could just as well be using the Single Image element to simply add the picture. I have asked this previously but haven´t been able to figure out how to use the Single Image element and have an image keep it´s proportions _without_ adding a square-box-border around the whole image. Making it look extremely weird and with way to much padding on mobile units.

See this picture for reference: https://imgur.com/a/jkBLZ

The bottom image (1) is added using the Single Image element. Image Size is set to Contain. This adds a box of padding around the picture when it shrinks. The image shrinks correctly, but I can´t see any reason why it has to have so much padding on top and bottom.

The top image (2) is added through the normal editor using the Text With Title element. Here the picture scales perfect, without adding any additional borders.