Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.8k stars 874 forks source link

[BUG] A white space flashes between two images on the scrolling page #1213

Open AwayiOS opened 1 year ago

AwayiOS commented 1 year ago

Describe the bug:

When i use flutter_html to parse multiple consecutive image labels, a white space may appear between two images, which will flicker across the page as you scroll

HTML to reproduce the issue:

String testData = """
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/_tHw4fr3PT4N-jTEOoLIWw.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/2uBTJpphPDKPc_K9ljtEow.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/2xYdwVxPYIpuDdCBvjAnpQ.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/42tRzyVisDwYTl-rpcsK-g.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/O4sPjF58lrp-bvi5GqrM-w.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/_VzfnaAKT67CPpNi080ajw.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/p_hC61UOZD76l5BdkS66pw.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/qgCJ1FRxqQWPhsqGllDv0g.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/ged0hW9B_-K0qPhw7tL5rg.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/sSG1eqz90912wnm-mnx3dA.jpg\" class=\ "err-product\"/>
      <img  src=\ "https://uimgproxy.suning.cn/uimg1/sop/commodity/2Ilmfd_gPEgOl2AtHPytVw.jpg\" class=\ "err-product\"/>
  """;

Html widget configuration:

Widget buildHtml(){
    return Html(
      data: testData,
      onImageTap: (url, context, attributes, element) {
        print('=== image info ===');
        print(url);
        print(context.buildContext.size);
        print(context.parser.cachedImageSizes);
        print(attributes);
        print(element);
      },
    );
 }

Expected behavior:

Screenshots:

issueimg1 issueimg2

Or you can check out this video: https://github.com/AwayiOS/IssueResource/blob/main/videos/flutter_html_issue_video.mov

Device details and Flutter/Dart/flutter_html versions:

Mobile: iPhone XS Pro Max iOS 15.4.1

Flutter (Channel stable, 3.3.9, on macOS 12.6.1 21G217 darwin-x64, locale zh-Hans-CN)

sdk version flutter_html: ^3.0.0-alpha.6

Additional info:

I think it may be caused by the calculation deviation of image widget position when scrolling

A picture of a cute animal (not mandatory but encouraged)

avatar

Sub6Resources commented 1 year ago

Unfortunately I think this is an issue with Flutter's implementation of RichText and PlaceholderSpan rendering being a bit buggy as a scroll happens. I'll dive into this at some point and see if we can't file some sort of issue for the Flutter team to look at.