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.

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

iFrame rendering creates empty spaces and RenderFlex overflow error #1169

Open
BasakK6 opened this issue Jan 21, 2024 · 7 comments
Open

iFrame rendering creates empty spaces and RenderFlex overflow error #1169

BasakK6 opened this issue Jan 21, 2024 · 7 comments
Assignees
Labels
question Further information is requested

Comments

@BasakK6
Copy link

BasakK6 commented Jan 21, 2024

Steps to Reproduce

HTML
<html>
    <head></head>
    <body>
        <p class="p2">
            <b>Sie trägt regenbogenfarbene Kleidung, lehnt in dem Song „Me“ den Heiratsantrag eines Mannes ab und bedient sich für das Album „Lover“ einer „bisexuellen Ästhetik“ – für
                <em>
                    <a href="https://www.nytimes.com/2024/01/04/opinion/taylor-swift-queer.html">New York Times</a>
                </em>-Autorin Anna Marks ein klarer Fall: Pop-Sängerin Taylor Swift ist queer, sie traut sich bloß nicht, es zuzugeben.<span class="Apple-converted-space">&nbsp;</span>
            </b>
        </p>
        <p class="p2">
            <span class="Apple-converted-space">Das Spielen mit Geschlechterrollen hat in der Popkultur Geschichte. David Bowie und Prince haben es perfektioniert. Auch die Ambivalenz ihrer Sexualität machte sie zu so schillernden, herausragenden Künstlern. Es gab bewusst Raum für Interpretation statt Eindeutigkeit. &nbsp;</span>
        </p>
        <p class="p2">
            <b>
                <span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/0d800949-6528-4c6c-9384-0770ede2bb4a/121440454-taylor-swift.jpg?width=800" width="1000" height="719" alt="Taylor Swift auf einem Konzert 2019."><br><span class="imagecaption">Taylor Swift auf einem Konzert 2019.</span>
                </span>
            </b>
        </p>
        <h2 class="p2">
            <b>Bekenntnisse müssen her!</b>
        </h2>
        <p class="p2">Ganz anders heute. Stars wie Sänger Harry Styles, der sich gern feminin kleidet, sehen sich mit dem Vorwurf des „Queerbaiting“ konfrontiert. Das heißt, durch seine Ästhetik zieht er queere Fans an, ohne sich jedoch selbst der queeren Community zuzuordnen. Für viele ein No-Go. Ähnlich erging es der Pop-Sängerin Billie Eilish – bis sie sich endlich als „queer“ outete.<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <p class="p2">
            <span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/fc9fd595-f269-4734-8764-e8db8adfa093/dpa-picture-alliance-2.394212836-highres.jpg?width=800" width="1000" height="765" alt="Sänger Harry Styles im Glitzer-Look. "><br><span class="imagecaption">Sänger Harry Styles im Glitzer-Look.
                </span>
            </span>
        </p>
        <p class="p2">
            <span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/e18d97c7-0bdd-41ac-9399-7fd194505a9d/dpa-picture-alliance-2.441197026-highres.jpg?width=800" width="1000" height="1541" alt="Billie Eilish wurden ebenfalls „Queerbaiting“ vorgeworfen."><br><span class="imagecaption">Billie Eilish wurden ebenfalls „Queerbaiting“ vorgeworfen.</span>
            </span>
        </p>
        <h2 class="p2">
            <b>Autorin unterstellt Swift, eindeutige queere Signale zu senden</b>
        </h2>
        <p class="p2">Nun erwischte es Taylor Swift. Vom
            <em>Time Magazine</em>
            2023 als „Person of the Year“ gekürt, ist sie eine der erfolgreichsten Künstlerinnen der Zeit. Auf Spotify wurden ihre Songs über 26 Milliarden Mal abgerufen. Aufgrund ihres extravaganten Kleidungsstils und ihre Performance gilt Swift schon lange als Ikone der queeren Community. Sogenannte „Gaylors“, eine Untergruppe ihrer Fangemeinde, sind davon überzeugt, dass die Künstlerin eigentlich lesbisch oder bisexuell ist.<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <p class="p2">
            <span class="Apple-converted-space"><img src="https://api.nius.de/api/assets/office-hr/82001366-a050-4cb9-8bf2-6fb8afbd8bd6/dpa-picture-alliance-2.120986884-highres.jpg?width=800" width="1000" height="1199" alt="Zeig mir deine Kleidung und ich nenn dir deine sexuelle Orientierung."><br><span class="imagecaption">Zeig mir deine Kleidung und ich nenn dir deine sexuelle Orientierung.</span>
            </span>
        </p>
        <p class="p2">Dieser Spekulation schloss sich nun auch die
            <em>New York Times</em>-Autorin Anna Marks an. Taylor Swifts Songtexte und Ästhetik strotzten nur so vor „Queer-Flagging“, schreibt sie in einem 5000-Zeichen Essay. Schmetterlinge, Regenbögen und ein Instagram-Post aus dem Jahr 2019, auf dem Swifts Arm zu sehen ist, am Handgelenk verschiedene Armbänder, unter anderem mit der Aufschrift „Lover“, „proud“ und „fearless“, sind für Marks ein klares Outing.<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <p>
            <iframe height="669" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid #dbdbdb; box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;" class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/B0yzUuGjB7q/embed/captioned/?cr=1&amp;v=14&amp;wp=1080&amp;rd=https%3A%2F%2Fcms.nius.de&amp;rp=%2Fapp%2Foffice-hr%2Fcontent%2Farticle%2F2406c04a-d358-4511-9b49-4c9f2198c7a0#%7B%22ci%22%3A0%2C%22os%22%3A912.6999999880791%7D" allowtransparency="true" allowfullscreen="allowfullscreen" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no"></iframe>
        </p>
        <p class="p2">
            <span class="Apple-converted-space">
                <script async="" src="//www.instagram.com/embed.js"></script>
            </span>
        </p>
        <h2 class="p2">
            <b>Swift sieht sich nicht als Teil der LGBTQI+-Community</b>
        </h2>
        <p class="p2">Queerness in der Musikindustrie sei noch immer ein Tabuthema. Daher würde Swift ihre wahre sexuelle Orientierung verbergen, um nicht anzuecken und weiterhin profitabel zu bleiben, unterstellt ihr Marks. Auch der Fakt, dass die Sängerin mit dem Footballstar Travis Kelce liiert ist, scheint die
            <em>New York Times</em>-Autorin nicht von ihrer Theorie abzubringen. Ganz im Gegenteil. Sie zweifelt an, dass Swift wirklich heterosexuell ist und behauptet, dass sie „in den düsteren, einsamen Ecken der Verheimlichung feststeckt“.</p>
        <p class="p2"><img src="https://api.nius.de/api/assets/office-hr/c8e4ba89-3a3d-4d61-bcb9-03cd87690ba4/438493450.jpg?width=800" width="1000" height="794" alt="Swift mit ihrem Freund Travis Kelce."><br><span class="imagecaption">Swift mit ihrem Freund Travis Kelce.</span>
        </p>
        <p class="p2">Damit spricht Marks Swift, die im vergangenen Sommer der
            <em>Vogue</em>
            deutlich machte, nicht „Teil“ der LGBTQI+-Community zu sein, ihre Heterosexualität ab, ignoriert die Aussagen der Sängerin und fabuliert öffentlich über etwas, das Privatsache ist. Bemerkenswert ist, dass Anna Marks sich selbst als queer bezeichnet.<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <p>
            <iframe height="598" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid #dbdbdb; box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;" class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/B1eMQJlDnJS/embed/captioned/?cr=1&amp;v=14&amp;wp=1080&amp;rd=https%3A%2F%2Fcms.nius.de&amp;rp=%2Fapp%2Foffice-hr%2Fcontent%2Farticle%2F2406c04a-d358-4511-9b49-4c9f2198c7a0#%7B%22ci%22%3A0%2C%22os%22%3A907.9000000059605%7D" allowtransparency="true" allowfullscreen="allowfullscreen" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no"></iframe>
        </p>
        <p class="p2">
            <span class="Apple-converted-space">
                <script async="" src="//www.instagram.com/embed.js"></script>
            </span>
        </p>
        <h2 class="p2">
            <b>Essay stößt auf Kritik</b>
        </h2>
        <p class="p2">Swifts Umfeld ist empört über die These der Autorin.
            <em>CNN</em>-Reporter Oliver Darcy zitiert eine der Sängerin nahestehende Person: „Es gibt offenbar für manche Journalisten keine Grenze, wenn es um Stücke über Taylor geht, egal wie übergriffig, unwahr und unangebracht.“<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <p class="p2">Der Musikkritiker des
            <em>Variety</em>-Magazins Chris Willmann schrieb auf X, das Essay sei das „am wenigsten vertretbare Meinungsstück, das ich je in der ‚Times‘ gesehen habe. Schlimmer noch: Es ist verfasst von einer Mitarbeiterin, die sich auf solche Spekulationen spezialisiert.“ Auch die Fans, die sogenannten „Swifties“, echauffierten sich in der Kommentarspalte unter dem Text. Die sexuelle Orientierung der Künstlerin gehe niemanden etwas an.<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <div class="twitter-tweet twitter-tweet-rendered" style="display: flex; max-width: 550px; width: 100%; margin-top: 10px; margin-bottom: 10px;">
            <iframe style="position: static; visibility: visible; width: 550px; height: 344px; display: block; flex-grow: 1;" id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" class="" title="X Post" src="https://platform.twitter.com/embed/Tweet.html?dnt=false&amp;embedId=twitter-widget-0&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=1744107674906800263&amp;lang=en&amp;origin=https%3A%2F%2Fcms.nius.de%2Fapp%2Foffice-hr%2Fcontent%2Farticle%2F2406c04a-d358-4511-9b49-4c9f2198c7a0&amp;sessionId=fa6899045836a2d9258d9d7284db59fe047a39fe&amp;theme=light&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px" data-tweet-id="1744107674906800263"></iframe>
        </div>
        <p class="p2">
            <span class="Apple-converted-space">
                <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </span>
        </p>
        <p class="p2">Interessant ist die Sehnsucht einiger Vertreter der queeren Szene nach Eindeutigkeit und Bekenntnis. Was ändert ein Coming-out von Künstlern an der Qualität ihrer Musik? Wie kleinlich ist es, davon überzeugt zu sein, wer für Queere singt, muss selbst queer sein.</p>
        <p class="p2">Letztlich passt es in ein Weltbild, in dem es bereits kulturelle Aneignung ist, wenn Weiße ein Curry essen, und in dem es als rassistisch gilt, sobald Nicht-POCs sogenannte „Braids“, also Flechtfrisuren, tragen. Die Schlussfolgerung dieses beschränkten Denkens ist eine Fragmentierung der Gesellschaft, in der jeder nur von Menschen der gleichen Ethnie, mit der gleichen sexuellen Orientierung und mit identischen Interessen umgeben ist.<span class="Apple-converted-space">&nbsp;</span>
        </p>
        <p class="p2">
            <em>Und das klingt, ehrlich gesagt, grauenvoll.<span class="Apple-converted-space">&nbsp;</span>
            </em>
        </p>
        <p class="p2">
            <span class="Apple-converted-space">
                <strong>Mehr NIUS:</strong><br></span>
            <a href="https://www.nius.de/Video/stell-dir-vor-es-ist-queerer-weihnachtsmarkt-und-keiner-geht-hin/b8dfc8f8-79a8-4af3-8fa1-6fdf86d92b13">
                <span class="Apple-converted-space">Stell dir vor, es ist queerer Weihnachtsmarkt – und keiner geht hin!</span>
            </a>
            <em>
                <span class="Apple-converted-space"><br></span>
            </em>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
        <p>
            <iframe style="display: none;" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/widget_iframe.2f70fb173b9000da126c79afe2098f02.html?origin=https%3A%2F%2Fcms.nius.de" title="Twitter settings iframe"></iframe>
            <iframe style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;" id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" title="Twitter analytics iframe"></iframe>
        </p>
    </body>
</html>
`HtmlWidget` configuration
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:html_sample/html_data.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Sample App"),
      ),
      body: const SingleChildScrollView(
        child: HtmlWidget(
          htmlData
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
Tesing environment
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.3, on macOS 12.6 21G115 darwin-arm64, locale tr-TR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

Expected results

iFrames should be rendered to fit to the device width without the RenderFlex overflow error and without horizontal/vertical gaps. I realized that RenderFlex overflow error and the vertical gaps only happen after flutter_widget_from_html: ^0.14.2. flutter_widget_from_html: ^0.10.6 is working without a RenderFlex overflow error but some of the iframes don't fit to the device width.

Actual results

flutter_widget_from_html: ^0.14.11 outputs:

renderflex_overflow gap1 gap2
renderflex_overflow gap1 gap2

flutter_widget_from_html: ^0.10.6 outputs:

width_gap no_gap1 no_gap2
width_gap no_gap1 no_gap2
@BasakK6 BasakK6 added the bug Something isn't working label Jan 21, 2024
@MiMiOne
Copy link

MiMiOne commented Apr 23, 2024

in iOS can't show <iframe> data, i have a src source,only show a white view

@daohoangson
Copy link
Owner

What is your HTML?

@daohoangson
Copy link
Owner

@BasakK6 the latest version flutter_widget_from_html@0.15.0 has a fix for this, it will restore the previous behavior in v0.10 to display the IFRAME without overflow. Please try upgrading and let me know whether it works for you.

@daohoangson daohoangson added question Further information is requested and removed bug Something isn't working labels May 4, 2024
@BasakK6
Copy link
Author

BasakK6 commented May 7, 2024

@daohoangson looks like the RenderFlex overflow error is resolved in the flutter_widget_from_html@0.15.0 but it still creates vertical gaps. Please find a comparison between the versions 0.15.0 and 0.10.6 below:

version 0.15.0 result:

version 0.10.6 result:

@daohoangson
Copy link
Owner

The latest version (v0.15.1) has been released with another fix for the gap. Please try upgrading and let me know whether it works for you.

@BasakK6
Copy link
Author

BasakK6 commented Jun 14, 2024

Gaps inside the Instagram posts seem to be fixed 👍 But is it possible to fıt the X posts to the available width as well? There seems to be a gap always on the right side of the X posts. Here are some of the screenshots from the version (v0.15.1):

X

Intagram

@si-david-benjamin
Copy link

Gaps inside the Instagram posts seem to be fixed 👍 But is it possible to fıt the X posts to the available width as well? There seems to be a gap always on the right side of the X posts. Here are some of the screenshots from the version (v0.15.1):

X

Intagram

Guys any update on this as we are facing same issue in our app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

4 participants