Skip to content

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

Open
@AwayiOS

Description

@AwayiOS

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    Status

    Todo

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions