Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to display html content #578

Closed
dab246 opened this issue Aug 23, 2021 · 2 comments
Closed

Unable to display html content #578

dab246 opened this issue Aug 23, 2021 · 2 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@dab246
Copy link

dab246 commented Aug 23, 2021

Steps to Reproduce

HTML 
\n    <!doctype html>\n    <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n      <head>\n        <title>\n          \n        </title>\n        <!--[if !mso]><!-->\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        <!--<![endif]-->\n        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style type=\"text/css\">\n          #outlook a { padding:0; }\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n          p { display:block;margin:13px 0; }\n        </style>\n        <!--[if mso]>\n        <xml>\n        <o:OfficeDocumentSettings>\n          <o:AllowPNG/>\n          <o:PixelsPerInch>96</o:PixelsPerInch>\n        </o:OfficeDocumentSettings>\n        </xml>\n        <![endif]-->\n        <!--[if lte mso 11]>\n        <style type=\"text/css\">\n          .mj-outlook-group-fix { width:100% !important; }\n        </style>\n        <![endif]-->\n        \n      <!--[if !mso]><!-->\n        <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n        <style type=\"text/css\">\n          @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);\n        </style>\n      <!--<![endif]-->\n\n    \n        \n    <style type=\"text/css\">\n      @media only screen and (min-width:480px) {\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\n      }\n    </style>\n    \n  \n        <style type=\"text/css\">\n        \n        \n        </style>\n        \n        \n      </head>\n      <body style=\"word-spacing:normal;\">\n        \n        \n      <div style>\n        \n      \n      <!--[if mso | IE]><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n    \n      \n      <div style=\"margin:0px auto;max-width:600px;\">\n        \n        <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n          <tbody>\n            <tr>\n              <td style=\"direction:ltr;font-size:0px;padding:20px 0;padding-bottom:32px;text-align:center;\">\n                <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"\" width=\"600px\" ><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n    \n      \n      <div style=\"margin:0px auto;max-width:600px;\">\n        \n        <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n          <tbody>\n            <tr>\n              <td style=\"direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;padding-top:0;text-align:center;\">\n                <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"alarm-title-container-outlook\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n            \n      <div class=\"mj-column-per-100 mj-outlook-group-fix alarm-title-container\" style=\"background: #eaeefe; border-radius: 4px; border: 1px solid #eaeefe; font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;\">\n        \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n        <tbody>\n          <tr>\n            <td style=\"vertical-align:top;padding-top:4px;padding-bottom:4px;\">\n              \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style width=\"100%\">\n        <tbody>\n          \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:0;padding-top:8px;padding-right:20px;padding-bottom:8px;padding-left:20px;word-break:break-word;\">\n                  \n      <div style=\"font-family:Roboto;font-size:16px;line-height:1;text-align:left;color:#222222;\">This event is about to begin</div>\n    \n                </td>\n              </tr>\n            \n        </tbody>\n      </table>\n    \n            </td>\n          </tr>\n        </tbody>\n      </table>\n    \n      </div>\n    \n          <!--[if mso | IE]></td><td class=\"content-outlook\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n            \n      <div class=\"mj-column-per-100 mj-outlook-group-fix content\" style=\"border: 1px solid #ccc; border-radius: 4px; margin-top: 24px; font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;\">\n        \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"vertical-align:top;\" width=\"100%\">\n        <tbody>\n          \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:20px;word-break:break-word;\">\n                  \n      <div style=\"font-family:Roboto;font-size:20px;font-weight:500;line-height:1;text-align:left;color:#434343;\"></div>\n    \n                </td>\n              </tr>\n            \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:20px;padding-top:0px;word-break:break-word;\">\n                  \n      <table cellpadding=\"4px\" cellspacing=\"0\" width=\"100%\" border=\"0\" style=\"color:#434343;font-family:Roboto;font-size:14px;line-height:22px;table-layout:auto;width:100%;border:none;\">\n        <tr><td valign=\"top\" style=\"min-width: 80px;\"><strong>Time</strong></td><td><span style=\"display: inline-block;\">Tuesday 26 November 2019 04:30 - 05:30</span><span style=\"display: inline-block; color: #787878; font-weight: 400;\">&nbsp;Europe/Paris</span>&nbsp;(<a class=\"link\" href=\"https://dev.open-paas.org/calendar/#/calendar?start=11-26-2019\" style=\"text-decoration: none; color: #4d91c9;\">See in Calendar</a>)</td></tr><tr><td valign=\"top\"><strong>Attendees</strong></td><td><ul style=\"padding-inline-start: 16px; margin: 0;\"><li><span style=\"font-weight: 500\">userb@qa.open-paas.org</span><span style=\"color: #787878;\">&nbsp;&lt;userb@qa.open-paas.org&gt;</span><span style=\"font-weight: 500\">&nbsp;(Organizer)</span></li></ul></td></tr>\n      </table>\n    \n                </td>\n              </tr>\n            \n        </tbody>\n      </table>\n    \n      </div>\n    \n          <!--[if mso | IE]></td></tr></table><![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        \n      </div>\n    \n      \n      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        \n      </div>\n    \n      \n      <!--[if mso | IE]></td></tr></table><![endif]-->\n    \n    \n      </div>\n    \n      </body>\n    </html>\n
`HtmlWidget` configuration 
Scaffold(
      appBar: AppBar(title: const Text('HelloWorldScreen')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: HtmlWidget(
            html,
            buildAsync: true,
            webViewJs: false)),
));
Tesing environment 
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.5.2 20G95 darwin-x64, locale en)
    • Flutter version 2.2.2 at /Users/datvu/Library/flutter
    • Framework revision d79295af24 (2 months ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/datvu/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Users/datvu/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Connected device (2 available)
    • iPhone 12 Pro Max (mobile) • 1C37F734-46BD-4E91-9512-A5E4A71C9CD6 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 92.0.4515.159

! Doctor found issues in 1 category.

Expected results

Display html content

Actual results

Screen Shot 2021-08-23 at 15 19 22
@dab246 dab246 added the bug Something isn't working label Aug 23, 2021
@hoangdat hoangdat mentioned this issue Aug 23, 2021
Closed
@daohoangson
Copy link
Owner

I have tracked down the issue. Your HTML has "font-size: 0px" which triggers this Flutter bug: flutter/flutter#88708. There are a few immediate workaround for this:

  • Adjust the HTML and remove all font-size zero inline style
  • Use a custom WidgetFactory and ignore font-size when it's zero. I noticed you are rendering third party email with this package. It's probably a good idea to just ignore all font-size statements to make sure the email text is always readable.
  • Sanitize the HTML as mentioned in the linked issue

@daohoangson daohoangson self-assigned this Aug 23, 2021
@dab246
Copy link
Author

dab246 commented Aug 24, 2021

Thanks, that's working.

@daohoangson daohoangson removed their assignment Aug 26, 2021
@daohoangson daohoangson added the help wanted Extra attention is needed label Aug 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@daohoangson @dab246