Swipe to pop makes images jittery

Question

When I do the swipe to pop gesture from a view controller with images to another there's a jittery glitch in the disappearing view (the 1px white line). I'm using the system swipe UIGesture. Any idea on how to solve that? Thanks!

View Hierarchy

+ Scroll View (container)
| - ContentView
| - - Header Image
| - - Title Label
| - - Author/ Date Label
| - - Post Content

Constraints

        |
|-[Header Image]-|
        |
|-[Title Label]-|
        |
|-[Author/ Date Label]-|
        |
|-[Post Content]-|
        |

Just to be clear, is the white line staying there all the time or is it appearing and disappearing with a flickering? If so, I had the same issue a while back.. — GavinoGrifoni, Feb 15 '16 at 10:44
Can you print the whole view hierarchy? Maybe the zagg-image is positioned on 0.5? — hfossli, Feb 18 '16 at 11:50
do you use constraints? do you add the image programmatically? explain more so we can answer. — DeyaEldeen, Feb 18 '16 at 16:54
@Zazu I'm using auto layout so the whole layout is constraints based. — Gnurant, Feb 19 '16 at 12:38

Aruna Mudnoor · Answer 1 · 2016-02-21T05:05:48.560

1

I am not sure about why this happens, but can be solved by positioning image views x position to -1 instead of 0.

Update…

The is happens because of image size doesn’t scale to the image view size properly.

Eg: If image size width is 750 and image of the size 375, 750, 1500 will work properly. If you try to set image of the size 370, 300 etc then this problem occurs.

So make sure that your image size is proper.

edited Feb 21 '16 at 05:05

answered Feb 18 '16 at 11:40

Aruna Mudnoor

4,795
14
16

Any idea on how to scale the image properly ? – Gnurant Feb 21 '16 at 09:44
I i mentioned in my answer this can be solved by positioning image views x position to -1 instead of 0 or you have create image with proper size. – Aruna Mudnoor Feb 22 '16 at 04:48
I tried your first solution but it seems not working properly. I'm getting the images from Wordpress API so I don't have the ability to request the image with the right size. – Gnurant Feb 22 '16 at 08:07
Download image of any size and create image of required size. Refer http://stackoverflow.com/questions/17018617/how-to-resize-an-image-in-ios for creating images of required size. – Aruna Mudnoor Feb 22 '16 at 09:00
One more trick is setting image view background color with same image as imageView.backgroundColor = UIColor(patternImage: image). This will wok if your image doesn't have any alpha channel. – Aruna Mudnoor Feb 22 '16 at 09:18
This seams a good trick, is it heavy from a resources point of view ? – Gnurant Feb 22 '16 at 10:39
I tried the solution with imageView.backgroundColor, unfortunately it doesn't work, do you know other tricks ? – Gnurant Feb 23 '16 at 07:24
@ArunAmmannaya Unfortunately, none of the solutions you provided solved the problem for us. Still, you were the most active user in trying to solve the problem, so I think you deserve the bounty! Thanks! – GavinoGrifoni Feb 24 '16 at 11:19

score 1 · Answer 2 · answered Feb 19 '16 at 13:28

you need to describe the whole scenario

1- you need to make sure there is no empty pixel column in the image, once upon a time, a designer delivered to me a background image with empty pixel like this, i removed it in photoshop.

anyways, you mentioned you used constraints

2- try to make the factor of the constraint 1.01 or 1.02

please tell us more so we can help.

score 0 · Answer 3 · answered Feb 24 '16 at 09:28

If all the tricks proposed by Arun Ammayana don't work maybe the problem is on the ContentView. Which constraints are there on the ContentView?

I usually put a View as container of the scrollview and set the width of the inner container view as the outer one. If just this doesn't fix it you can try setting

inner view width = outer view width + 2 and inner view x = outer view x - 1

Like this you should have a +1 on both sizes.

score 0 · Accepted Answer · answered Feb 26 '16 at 09:14

Finally I solved the problem. The solution was a mix of suggestions proposed by @Arun Ammannaya and a lot of trial and error.

Solution

I moved the scroll view 2px to the left and I added the property Clip Subviews to the main View.

I think that the problem was generated by a wrong rounding of the Pan Gesture used by the swipe to pop gesture.

score -1 · Answer 5 · answered Feb 24 '16 at 09:30

-1

I think your image ratio is not fit with your image view. Can you try to change contentMode for your imageView?

  headerImageView.contentMode = UIViewContentMode.ScaleAspectFill

answered Feb 24 '16 at 09:30

Quang Hà

4,613
3
24
40

This is not the issue the OP is describing – GavinoGrifoni Feb 24 '16 at 09:31

Swipe to pop makes images jittery

5 Answers5