I'm seeing some strange font behavior with my Flutter web deployment vs PWA. Both are using default font (which I believe is Roboto?). On the left is my PWA, on the right is the browser. Both are built using canvaskit. On the second image, I've overlayed the two images together at 50%, so you can see how the font spacing is broken in the PWA.
The strange thing is that I've occasionally see the font render correctly in the PWA, but then after using the app for long enough, it breaks again. I've been unable to reproduce it deterministically.
How can I make both fonts consistent?
just use this code in terminal then restart android studio
--web-renderer canvaskit
Related
I have a Flutter web app, when I do web renderer html the text layout is fine with Safari in MacOS and totally messed up in Chrome on Mac and it looks like all the white spaces are missing. The canvaskit rendering is fine in Chrome. Attached is a screenshot with the comparison in two browsers (left side: Chrome, right side: Safari). Any idea what the problem is?
application looks different in release mode; it doesn't have any icons and widgets seem to grow bigger, fonts are different
commands used:
flutter build apk --build-name=1.0 --build-number=1
flutter run --release
I was trying to test release apk but it was totally different.
I solved the problem after 3 months of searching. It turned out that the font I used messed with the icons. Not sure how or why but the font I added in pubspec from Google fonts named Cairo was buggy. I recommend not using it.
Once I removed it everything came back to normal again!
A Flutter WebApp behaves using MacOS Chrome just fine. Using Safari on MacOS, the UI changes at certain points randomly. MacOS and Safari are the most recent releases with any applicable patch installed.
As far as I understand, MacOS Safari is a first class platform to run Flutter apps.
Could someone explain, what I may have missed?
Example
The Widget should appear as in the right image.
Actually, it appears as the one in the left image.
As soon as I move the mouse pointer over the second button, it changes from Urlau to ....
The String Urlau appears somewhere in the Flutter app, but very far away from the respective widget. Fully unrelated.
I compiled like so: flutter build web --web-renderer html
Using Safari on MacOS appears like so:
Using Chrome on MacOS appears just fine:
Try rendering with canvas kit using this command
flutter build web --web-renderer canvaskit
When a user enlarges a window hosting a xamarin.forms UWP app the layout/page does not resize, and the window controls disappear. If you make the window smaller everything reposition as expected. How do you get this to behave properly? I thought it was supposed to scale automatically.
I have downloaded and tested the project you provided on GitHub and it works normally and resizes as expected. I suspect the problem in your case may be that the UI thread was frozen or you Visual Studio Debugger froze the app. I would suggest restarting your PC and then doing Clean solution from Visual Studio and rebuild again. After these steps it should work normally. If not, perform repair of Visual Studio.
I am using chrome dev tools to optimize the performance of a website, can anyone expline what the pink area (at the bottom of the screenshot) it is?
The pink block area always shows when I scroll down/up the website.
This is the status of my chrome rendering debug switches.
Thanks!
I have this same issue after the latest Chrome Canary update to 85.0.4152.0
Unsure which specific sites will trigger this, but 1Password interface is completely pink.