Veer Suthar Veer Suthar - 3 months ago 22
iOS Question

UIWebView black color at bottom increases with Animation?

There are some posts, where UIWebView bottom is black and can be resolved by two simple ways.

1. Clear Background of UIWebView
2. Set Opaque to NO.

However, this only solves problem for static UIWebView which is not changing its Frame or Constraints.

In my case, I have a UIWebView, It is very simple Drag and Drop on Storyboard's ViewController's View. No Inheritance. I set Background clear and set opaque to NO.

It looks fine up to now. But when I apply animation, using Facebook POP library

1. SetOpaque = YES, With Animation is clips the UIWebView's content showing black color.

2. SetOpaque = NO, With Animation is clips the UIWebView's content showing nothing (a View or something comes in front)

-(void) setConstraint {

_topConstraintValue = self.topConstraint.constant - 200;

NSLog(@"Value is UP %f " ,_topConstraintValue);


- (IBAction)animateUp:(UIButton *)sender {

[self setConstraint];

[VSAnimation popChangeConstraintForBasicAnimation:self.topConstraint begin:0.5 newConstant:_topConstraintValue withDuartion:0.5 isEaseInAnimation:NO withCompletionBlock:nil];


-(void) setConstraintDown {

_topConstraintValue = 0;
_topConstraintValue = self.topConstraint.constant;

NSLog(@"Value is Down %f " ,_topConstraintValue);


- (IBAction)animateDown:(UIButton *)sender {

[self setConstraintDown];

[VSAnimation popChangeConstraintForBasicAnimation:self.topConstraint begin:0.5 newConstant:[self getAnimatableConstraint:_topConstraintValue] withDuartion:0.5 isEaseInAnimation:NO withCompletionBlock:nil];


return constant+200.0;


return constant-200.0;

Where, method inside VS is as below


+(void)popChangeConstraintForBasicAnimation:(NSLayoutConstraint *) layoutConstraintToPopChange begin:(float) beginTime newConstant:(CGFloat) newConstant withDuartion:(float)duration isEaseInAnimation:(BOOL)isEaseIn withCompletionBlock:(void (^)(POPAnimation *anim, BOOL finished)) completitionBlock{

NSString *key = [NSString stringWithFormat:@"constraints_changed_%@", layoutConstraintToPopChange];

POPBasicAnimation *basicAnim = [layoutConstraintToPopChange pop_animationForKey:key];
basicAnim.toValue = @(newConstant);
basicAnim.completionBlock = completitionBlock;

basicAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayoutConstraintConstant];
basicAnim.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
basicAnim.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
basicAnim.toValue = @(newConstant);
basicAnim.completionBlock = completitionBlock;
basicAnim.beginTime = [self timeWithDelay:beginTime];
basicAnim.delegate = self;
basicAnim.duration = duration;

[layoutConstraintToPopChange pop_addAnimation:basicAnim forKey:key];

What is this black line/transparent line at bottom.
How to stop this from increasing when one animates UIWebView.


SHOWING ANIMATION UP & ANIMATION DOWN.enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here


@VS, After reading you source code, I saw the constraint of the 2nd webview seems to be set wrongly. After I removed the height constraint WV2.height = 0.095 * height, the problem disappeared. You have to set the WV2's height constraint properly.