CSS issue not showing in XCode simulation but does on the actual iPad device

Ionic Framework
1

Hi

I am working on a project where I need to create a small block, as shown.
1

It looks fine on all android devices, browsers and also Apple simulators using XCODE.

But when it’s on an iPad or iPhone.

It looks like this:
2

This is my code:

      <ion-row style="    margin-left: -30px;">        
        <ion-col class="gaugerangetext_col">
          <ion-item class="gaugerangetext_col_low_graphpage"></ion-item>           
          <ion-text class="gaugerangetext_plot">Good 0-30</ion-text>
        </ion-col>
        <ion-col class="gaugerangetext_col">
          <ion-item class="gaugerangetext_col_medium_graphpage"></ion-item>
          <ion-text class="gaugerangetext_plot">Moderate 30-60</ion-text>
        </ion-col>
        <ion-col class="gaugerangetext_col">
          <ion-item class="gaugerangetext_col_high_graphpage"></ion-item>
          <ion-text class="gaugerangetext_plot">Bad 60-90</ion-text>
        </ion-col>
      </ion-row>
.gaugerangetext_col_low_graphpage {
   width: 20px;
   height: 10px;
   --background: #0c8eca; ///change  
   //margin: 0 auto;  
   margin: 0 auto;
   left: 50%;
   top: 15px;
   transform: translateX(-50%);   
}


.gaugerangetext_col_medium_graphpage {
  width: 20px;
  height: 10px;
  --background: #eeb333;
  margin: 0 auto;
  margin: 0 auto;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
}

.gaugerangetext_col_high_graphpage {
  width: 20px;
  height: 10px;
  --background: #f0250a;
  margin: 0 auto;
  margin: 0 auto;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
}

This issue gets solved if I was to comment out
transform: translateX(-50%);
But then this means by blocks are not well centred.

Can someone advice why transform: translateX(-50%);` would effect an Apple device only?

2

What is the problem? The graphs are not centered under their title or their height is taller?

3

They are not graphs but small icon gauges. On Apple devices I noticed with recent OS updates, their height is extended.

4

I would scrap left/top/transform and use flexbox.

5

Is there a reason for that?

6

It should be way more consistent across browsers and it’s the modern way to align elements :smile: