[Android WebView] Flickers (and sometimes) crashes with gifs

[ksegla]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 6.11.4
Yarn: Not Found
npm: 3.10.10
Watchman: Not Found

Packages: (wanted => installed)
react-native: 0.48.4 => 0.48.4
react: 16.0.0-alpha.3 => 16.0.0-alpha.3

Target Platform: Android (7.0) [tested on an Galaxy S8]

Note: the problem did not exist on 0.43.2 but there have been a new Webview release by Google too.
There are absolutely no problems on Android 4.4 (Galaxy S3) nor Android 5.0 (Galaxy S6)

Steps to Reproduce

import React, { Component } from 'react'
import { WebView, AppRegistry, View } from 'react-native';

class App extends Component {
  render() {   
      return (
        <View style={{flex:0.5, backgroundColor:"cornflowerblue"}}>
        <WebView
        ref="webview"
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ uri: 'https://www.google.ca/search?dcr=0&biw=1152&bih=556&tbs=itp%3Aanimated&tbm=isch&sa=1&q=goku&oq=goku&gs_l=psy-ab.3..0i67k1j0j0i67k1l5j0l3.352827.354119.0.355898.4.4.0.0.0.0.220.792.0j3j1.4.0....0...1.1.64.psy-ab..0.4.786....0.xzxkVwrFye4#imgrc=vA_E_xvnvkLcVM:' }}
        startInLoadingState={true}
        style={{ height: 550 }}
        mediaPlaybackRequiresUserAction={false}       
    />
    </View>
      )
  }
}
AppRegistry.registerComponent('example', () => App);

Expected Behavior

The webview displays the gif without problems.
(The gif in the code is just an example. There are problems with most gifs. Seems like GIFs when returned by Google are quicker to exhibit problems.)

Actual Behavior

After about a minute, the gif flickers badly, then the picture goes dark and there are sometimes crashes of the app.

Reproducible Demo

import React, { Component } from 'react'
import { WebView, AppRegistry, View } from 'react-native';

class App extends Component {
  render() {   
      return (
        <View style={{flex:0.5, backgroundColor:"cornflowerblue"}}>
        <WebView
        ref="webview"
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ uri: 'https://www.google.ca/search?dcr=0&biw=1152&bih=556&tbs=itp%3Aanimated&tbm=isch&sa=1&q=goku&oq=goku&gs_l=psy-ab.3..0i67k1j0j0i67k1l5j0l3.352827.354119.0.355898.4.4.0.0.0.0.220.792.0j3j1.4.0....0...1.1.64.psy-ab..0.4.786....0.xzxkVwrFye4#imgrc=vA_E_xvnvkLcVM:' }}
        startInLoadingState={true}
        style={{ height: 550 }}
        mediaPlaybackRequiresUserAction={false}       
    />
    </View>
      )
  }
}
AppRegistry.registerComponent('example', () => App);

[ksegla]

May be related to #16445

[ksegla]

I think this may be linked to Fresco. Looking for the version that was used back in 0.43.2. I'm having problems even with simple images. Not all of them, but seems like some jpgs (on http://) generate instant crashes. Below, an example

import React, { Component } from 'react'
import { WebView, AppRegistry, View, Image } from 'react-native';

class App extends Component {
  render() {   
      return (
        <View style={{flex:0.5, backgroundColor:"cornflowerblue"}}>
        <Image source={{uri:"http://c.biz-file.com/c/1708/407207.jpg"}} style={{ width: 360, height: 264, borderRadius: 0 }} resizeMode='cover'/>
    </View>
      )
  }
}
AppRegistry.registerComponent('example', () => App);

Stack Trace

java.lang.RuntimeException:
at android.view.DisplayListCanvas.throwIfCannotDraw (DisplayListCanvas.java:260)
at android.graphics.Canvas.drawBitmap (Canvas.java:1420)
at android.graphics.drawable.BitmapDrawable.draw (BitmapDrawable.java:545)
at com.facebook.drawee.drawable.RoundedBitmapDrawable.draw (RoundedBitmapDrawable.java:226)
at com.facebook.drawee.drawable.ForwardingDrawable.draw (ForwardingDrawable.java:147)
at com.facebook.drawee.drawable.ForwardingDrawable.draw (ForwardingDrawable.java:147)
at com.facebook.drawee.drawable.ScaleTypeDrawable.draw (ScaleTypeDrawable.java:125)
at com.facebook.drawee.drawable.FadeDrawable.drawDrawableWithAlpha (FadeDrawable.java:304)
at com.facebook.drawee.drawable.FadeDrawable.draw (FadeDrawable.java:291)
at com.facebook.drawee.drawable.ForwardingDrawable.draw (ForwardingDrawable.java:147)
at com.facebook.drawee.generic.RootDrawable.draw (RootDrawable.java:83)
at android.widget.ImageView.onDraw (ImageView.java:1268)
at android.view.View.draw (View.java:18394)

[ksegla]

Follow up. It seems to be a caching problem.
When I empty the cache, everything goes well for a little while (till I come back to the page) before the mess starts again.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[tutoring]

I believe this line is your problem:
startInLoadingState={true}

If you remove this, I believe the flickering will disappear. I had the same issue and that seemed to solve it. This suggests this is a RN bug specific to how switching between the loading view and web view is handled.

[ksegla]

@tutoring
Thanks for the comment. I just tried it but unfortunately the issue is still there.
I found that I had the problem with GIFs returned by Google search but not those returned by Bing or DuckDuckGo. The thing though is that Bing and DuckDuck smooth over some problem. Viewing the GIFs on their source location always lead to flickers and crashes.