What's wrong with my ionic emulator?

[beefman]

When i view my gallery part of my application on an iphone 6 emulator i get a weird response. Anybody know why?

Html:

<ion-content ng-controller="photoCtrl" ng-init="getImages()">
<center>
    <div class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
        <div class="col col-25 divImage" ng-if="$index < images.length">
            <img class="galleryImage" ng-src="{{images[$index].src}}"/>
        </div>
        <div class="col col-25 divImage" ng-if="$index + 1 < images.length">
            <img class="galleryImage" ng-src="{{images[$index + 1].src}}" />
        </div>
        <div class="col col-25 divImage" ng-if="$index + 2 < images.length">
            <img class="galleryImage" ng-src="{{images[$index + 2].src}}" />
        </div>
        <div class="col col-25 divImage" ng-if="$index + 2 < images.length">
            <img class="galleryImage" ng-src="{{images[$index + 2].src}}"/>
        </div>
    </div>

css:

 .divImage { 
  width: 90px;
  height: 90px;
  overflow: hidden;

 }

 .galleryImage {
  height: 100%; 
  min-width: 100%; 
  left: 50%; 
  position: relative; 
  transform: translateX(-50%);
 }

[brandyshea]

What is <center>? Can you provide a codepen of this?

[beefman]

I have found out the issue. It’s Position: relative;. When i remove that line from my css it fixes it for the ios devices but when i remove that line it makes my android devices mess up.

Like this:

[beefman]

I think i might of solved it. It seems to be working fine on all of my emulators. I’ll test it on my physical devices now.

I’ve removed:

  left: 50%; 
  position: relative; 
  transform: translateX(-50%);