SlideBox pager issue while scrolling view

ionic-v1
1

Hi,

I have a flickering issue with the slide box pager.

When I put a Slidebox at the top of a view and some content below, the pager is flickering when I’m scrolling the view.
It’s happening on iOS and Android, not on browser.
Moreover, every DOM elements with absolute position which are hover the slidebox are flickering too.

You can see the result on the following link : flickering pager

I have create an empty sidemenu project with just the following view and some CSS to confirm the issue :smile:

<ion-view view-title="Slide test">
  <ion-content id="slide_test" has-bouncing="true">
    <ion-slide-box show-pager="true">
	    <ion-slide>
	    	<span>Slide 1</span>
		</ion-slide>
		<ion-slide>
			<span>Slide 2</span>
		</ion-slide>
		<ion-slide>
			<span>Slide 3</span>
		</ion-slide>
	</ion-slide-box>
	<ion-list>
		<ion-item>Item 1</ion-item>
		<ion-item>Item 2</ion-item>
		<ion-item>Item 3</ion-item>
		<ion-item>Item 4</ion-item>
		<ion-item>Item 5</ion-item>
		<ion-item>Item 6</ion-item>
		<ion-item>Item 7</ion-item>
		<ion-item>Item 8</ion-item>
		<ion-item>Item 9</ion-item>
		<ion-item>Item 10</ion-item>
		<ion-item>Item 11</ion-item>
		<ion-item>Item 12</ion-item>
		<ion-item>Item 13</ion-item>
		<ion-item>Item 14</ion-item>
		<ion-item>Item 15</ion-item>
		<ion-item>Item 16</ion-item>
		<ion-item>Item 17</ion-item>
		<ion-item>Item 18</ion-item>
		<ion-item>Item 19</ion-item>
		<ion-item>Item 20</ion-item>
		<ion-item>Item 21</ion-item>
	</ion-list>
  </ion-content>
</ion-view>

You can download this sample project on the following link : http://we.tl/sx9tqZZNYn

Here all my computer information :smile:

Cordova CLI: 5.1.1
Gulp version:  CLI version 3.8.11
Gulp local:   Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.5.5
Ionic App Lib Version: 0.2.2
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Yosemite
Node Version: v0.12.0
Xcode version: Xcode 6.4 Build version 6E35b

Can you help me regarding this ?

Thanks!

2

I have found a solution.

I don’t know if it’s a Ionic issue or a bigger one but here the solution : fixed-element-disappears

I have added the following modifications to my CSS :

#contact_view #contact_card .slider-pager {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
#contact_view #contact_card .slider-pager .slider-pager-page {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

The transform attribute forces the browser / webview container to redraw elements while scrolling.

With this, the pager is not flickering anymore.

1 Like