Images don't show on mobile screen until I rotate device

[StevenHu]

I’m using Cordova to create a mobile app for Android and iOS. On one page, you click a button and the JS loads to show the thumbnails of the category you selected. But the images don’t actually show until you rotate the device. There is space for the thumbnails, but no pictures shown. I see no console errors related to this problem.

What’s weird is that it worked fine when I coded the original code for Android, but then I made changes when iOS showed problems. Now I’m back in Android to see how the iOS changes impacted Android. That’s when this problem surfaced.

I am using Taffy DB and Cordova with materializecss for styling.

You first see a list of buttons with category names on them, such as:

<a id="shocks" href="#" onclick="showShocks();" class="black-text light-blue accent-1 btn chbtn truncate">Shocks</a>

You tap a button. It successfully calls the function that gets the items for that category from the Taffy DB:

function showShocks(){
 var show = localStorage.setItem('show','Shocks');
 getData();
 }

The div for the output is filled with innerHtml:

 db({heading:show}).each(function (name){
    var heading=(name["heading"]);
    var numb=(name["numb"]);
    var named=(name["named"]);
    output.innerHTML+="<div class='segment'><div class='segmentimg'><img style='max-width:100%;' src='../images/parts/" + numb + "_sm.jpg'>" + "</div>" +
   "<p class='title'>#" + numb + " " + named + " <a href='#' onclick=\"window.open('{EDIT}" + numb + "/','_blank','location=yes','closebuttoncaption=Return');\"'><br><span class='black-text light-blue accent-1 btn onbtn'>Online</span></a></p></div>";
 });
{EDIT for brevity}
 }

Space is made for the thumbnails, but the thumbnails are not showing. Perversely, when I rotated the device, the images popped on!

[ronpat]

Are you saying that the images show only in landscape format? or are you saying that you have to rotate the phone from one format to the other (doesn’t matter which way) to make them show at all?

The obvious question is, "Did you save a copy of the code before you changed it to try to accommodate IOS?

[StevenHu]

The images pop on when I rotate to landscape, then stay on when I get back to Portrait.

No! [head slap] … No, wait, yes I did …

[StevenHu]

Bad news. Reverting to the old style still has the same problem of no thumbs showing. Strange. So far, unable to google proper search terms to find similar issue.

[StevenHu]

Fixed with a css transform:

.pic {
    transform: rotate(360deg);
}

<img class='pic' ... >

So instead of rotating the device, I rotated the image! Hacky, but it works.