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

Flutter Web Embed is inheriting Text widget font size from host document #148035

Closed
sanhq opened this issue May 9, 2024 · 5 comments
Closed

Flutter Web Embed is inheriting Text widget font size from host document #148035

sanhq opened this issue May 9, 2024 · 5 comments
Labels
r: solved Issue is closed as solved

Comments

@sanhq
Copy link

sanhq commented May 9, 2024 •
edited by huycozy

Steps to reproduce

  1. Create a simple Flutter app that returns a Text widget of font-size 20.0
MaterialApp(
      title: 'FONT TEST',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Brand.color),
        useMaterial3: true,
      ),
      home:  SafeArea(child: Scaffold(
    body:Text('WELCOME', style: TextStyle(fontSize: 20.0),),),),
);

If you run this app, you see WELCOME in 20 size

  1. Create a HTML host doc with CSS of following
html{
font-size: 100px;
}

Embed the Flutter web app into this HTML doc

and the text renders of size 100, not 20.0

Expected results

Flutter canvas text elements should only render with size/style applied on Text widgets

Actual results

Flutter canvas text elements are inheriting host element styling and using font size of overriding the font size provided within Text() widget

Code sample

Code sample 
[Paste your code here]

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[Paste your output here]
@huycozy huycozy added the in triage Presently being triaged by the triage team label May 9, 2024
@huycozy
Copy link
Member

huycozy commented May 9, 2024

Hi @sanhq
I think this is working as intended. You can see the same behavior on mobile when the font size is changed by system settings. You can bypass this by specifying textScaler like this on your MaterialApp:

home: const MyHomePage(title: 'Flutter Demo Home Page'),
builder: (context, child) => MediaQuery(
  data: MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(1.0)),
  child: child!,
),

Let's give it a try to see if it's appropriate for your case.

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 9, 2024
@sanhq
Copy link
Author

sanhq commented May 10, 2024

My case is different, it's when the flutter app is embed into a web page, and only when that host web page has css for html element changing font size, for example if the host page has css styles defined(font size), text elements in the flutter app are inheriting that size.
If the same host webpage in same device but without styling on html element works fine.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 10, 2024
@huycozy
Copy link
Member

huycozy commented May 10, 2024

Have you tried my code above? Does it work for your case? I tried it and see it works on my end (applying CSS style on /web/index.html).

index.html 
<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="reproduce_web_embedding">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>reproduce_web_embedding</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
  <style>
    html{
      font-size: 100px;
    }
  </style>
</head>
<body>
  <div style="height:500px; width:500px;" id="flutter_target"></div>
  <script>
    window.addEventListener('load', function(ev) {
      let target = document.querySelector("#flutter_target");
        _flutter.loader.loadEntrypoint({
          onEntrypointLoaded: async function (engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              hostElement: target,
            });
            await appRunner.runApp();
          },
        });
    });
  </script>
</body>
</html>

If it doesn't work, could you share a complete sample project? Thanks!

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 10, 2024
@sanhq
Copy link
Author

sanhq commented May 11, 2024

I tried your code with textScaler on MaterialApp builder, and it worked, I tried this on a fresh sample app and fonts are working fine now, I will try this on my main project to see if it generates any other conflicts and will report if I face any.

otherwise, this is solved, thanks for your help.

@sanhq sanhq closed this as completed May 11, 2024
@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 11, 2024
@huycozy huycozy added r: solved Issue is closed as solved and removed in triage Presently being triaged by the triage team labels May 12, 2024
@github-actions GitHub Actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
r: solved Issue is closed as solved
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sanhq @huycozy