Ion-header in slide page produces empty gap on ios ok on android

Ionic Framework ionic-v3
1

i have this multi page slider, with a separate header on each slide page.

the header is two ion-toolbar elements, before the slider ion-content.

if I do NOT use ion-header to wrap the two ion-toolbar elements,
then the scrollable area does not detect the common ion-footer outside the slides,
and the last element in my table is clipped off…

if i DO use ion-header, then the scollable area is managed correctly, BUT, the top of the scroll area is down from the header quite a ways, leaving a ugly gap… also BUT… the header TEXT is no longer centered.
and also the header area itself is very big… space between my two ion-toolbars

i have a push button in the slide page header to handle add a new/edit a selected row. (double click also edits, hold deletes)

with the ion-header (1st or 4 slide pages), others duplicate this model .

<ion-content> 

<ion-slides loop="true" id="loopSlider">
  <ion-slide class="theroot slide-zoom" width="100%" height="100%">				
<ion-header>
  <ion-toolbar no-border>
  <ion-row>
    <ion-col col-1>

	<button ion-button small clear icon-only (click)="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
		<ion-icon [ios]="getselectedRow('viewer')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('viewer')<0 ? 'md-add':'md-search'"></ion-icon> 
	</button>					

		</ion-col>
		<ion-col col-10>Viewers</ion-col> 
	 </ion-row> 
  </ion-toolbar>
 <ion-toolbar > 
	<ion-row>	
		<ion-col col-4 class=" center">Name</ion-col>
		<ion-col col-3 class=" center">Tags</ion-col>
		<ion-col col-2 class=" center">Advance</ion-col>
		<ion-col col-1 class=" center">Rate</ion-col>
		<ion-col col-2 class=" center">Active</ion-col>
	</ion-row>			
  </ion-toolbar> 
</ion-header>
<ion-content>
	<ion-row  *ngFor="let viewer of data.Viewers;let i=index" 
			[ngClass]="{true:'selected',false:''}[i ==  getselectedRow('viewer')]"                        
			(dblTap)="addeditClicked(2,i,'viewer','edit')" nowrap
			(press)="deleterow(i,'viewer')"			 
			 >
		<ion-col  col-4 class = "colb  center" (click)="setClickedRow(i,'viewer','Name')">{{viewer.Name}}</ion-col>
		<ion-col  col-3 class="colb   center" (click)="setClickedRow(i,'viewer','Tags')">
  		  <ul style="nobull margin-top : 0;margin-bottom : 0;margin-left:0;">
			<li *ngFor="let tag of viewer.Tags;let t=index;">{{tagfromID(tag)}}</li>
		  </ul>											  
		</ion-col>
		<ion-col col-2 class = " colb  center " (click)="setClickedRow(i,'viewer','Advance')">{{viewer.Advance}} </ion-col>
		<ion-col col-1 class = " colb  center" (click)="setClickedRow(i,'viewer','RefreshRate')">{{viewer.ImageRefreshRate}}</ion-col>
		<ion-col col-2 class = "col colb  center" (click)="setClickedRow(i,'viewer','Active')">{{viewer.Active}}</ion-col>
	</ion-row>
	</ion-content>
  </ion-slide>
...

common footer

</ion-slides>
</ion-content> 
<ion-footer>
  <ion-toolbar > 

    <ion-buttons left>
      <button ion-button  (click)="back()">
      	<ion-icon md="md-arrow-round-back"></ion-icon>Back
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button (click)="next()">Next
      		<ion-icon md="md-arrow-round-forward"></ion-icon>
      </button>
    </ion-buttons>

  </ion-toolbar> 
</ion-footer>

screen shot with ion-header, ios

screen shot with ion-header, android

without the ion-header

<ion-content> 

<ion-slides loop="true" id="loopSlider">
  <ion-slide class="theroot slide-zoom" width="100%" height="100%">				

  <ion-toolbar no-border>
  <ion-row>
    <ion-col col-1>

	<button ion-button small clear icon-only (click)="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
		<ion-icon [ios]="getselectedRow('viewer')<0 ? 'ios-add':'ios-search'" [md]="getselectedRow('viewer')<0 ? 'md-add':'md-search'"></ion-icon> 
	</button>					

		</ion-col>
		<ion-col col-10>Viewers</ion-col> 
	 </ion-row> 
  </ion-toolbar>
 <ion-toolbar > 
	<ion-row>	
		<ion-col col-4 class=" center">Name</ion-col>
		<ion-col col-3 class=" center">Tags</ion-col>
		<ion-col col-2 class=" center">Advance</ion-col>
		<ion-col col-1 class=" center">Rate</ion-col>
		<ion-col col-2 class=" center">Active</ion-col>
	</ion-row>			
  </ion-toolbar> 

<ion-content>

rest is the same

screen shot WITHOUT the ion-header android (while the top is better, the bottom is clipped, same on ios)

2

anybody? I think i need to change the height of the ion-header… or padding, or?

3

i deleted all my css settings, and it seems much better