Text jumping around, moving, during rendering/transitions - wrap in list


#1

I have a list with thumbnail and text of article headlines , which links to the full article, which them provides a back nav to the headlines again. Problem is for a brief instant after going back, the screen jumps because the text is being renderd with different spaces, like shown here:

This is my list code:

<ion-view title="{{title}}">
  <ion-content class="has-header padding">
	<ion-list id="news">
	  <ion-item class="item-text-wrap item-thumbnail-left" href="#tab/newsdetail/{{headline.ID}}" ng-repeat="headline in schoolnews">
	    <img src="img/{{headline.image}}">
	    <p>{{headline.title}}</p>
	  </ion-item>
	</ion-list>
  </ion-content>
</ion-view>

If I remove the item-text-wrap class there is no jumping, but I need it to stop titles being truncated.

Thanks for any ideas :slight_smile:


#2

Sounds very much like this issue

Tweak your transition CSS and see if it fixes it.


#3

Thank you so much! That fixed it, tested on android 2.3 & 4.2!

For anyone else reading this the changes Alex mentions are in the slide-left-right-ios7 and slide-left-right-ios7.reverse classes of ionic.css v1.0.0-beta.11 - lines 6513/6514 and 6543/6544 - is this correct Alex?