Bonissauro commented 3 years ago

As a flutter web app usually takes a bit of time to be loaded for the first time, I'm trying to show a message in its splash screen to notify the user that the thing is not frozen e that time is a regular behavior.

To achieve that, I just put these few lines of code on web/index.html

    <div style="text-align: center; position: absolute; top: 40%; width: 100%">
        <center>
            <p style="font-weight: bolder;">Carregando o catálogo...</p>
            <p>Na primeira execução, isso pode demorar cerca de 20 a 30 segundos.<br/>Seja paciente! ;-)</p>
        </center>
    </div>

It's a matter of fact that message is shown, but, it's color/size changes in a mysterious way along the process, and I just can't figure out the reason. Take a look at this:

https://i.stack.imgur.com/yIym3.gif

Does anyone have any clue of what is happening and how to solve it?

10x in advance for any help.

TahaTesser commented 3 years ago

HI @Bonissauro When you run the first it loads regular text after that flutter loads it's web bundles which makes your text change then Flutter view is loaded

You can confirm this by commenting Flutter part and the text stays as it is

index.html

```html stable_flutter

LOADING.....

```

I am no web expert but i tried :not css properties, still change is made by Flutter


  <title>stable_flutter</title>
  <link rel="manifest" href="manifest.json">
  <style>
    :not(#my_loading_title) {
      font-size: 200;
      min-block-size: 200;
      max-block-size: 200;
      color: red; font-family: 'Courier New', Courier, monospace; 
    }
  </style>
</head>
<body>
  <div style="text-align: center; position: absolute; top: 40%; width: 100%">
    <center>
      <H1 title="my_loading_title">LOADING.....</H1>
    </center>
</div>

Since Flutter doesn't officially support splash screen on web https://github.com/flutter/flutter/issues/48468 Any html hack could have unexpected behavior, you might get better help on Stackoverflow on how to prevent this. Closing, thank you

TahaTesser commented 3 years ago

See https://github.com/flutter/flutter/issues/48468#issuecomment-678741556

github-actions[bot] commented 3 years ago

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.

flutter / flutter

Flutter web - splash screen - weird behavior #86824

LOADING.....