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?
Related
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
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
I am creating a dev. site to eventually replace an existing site and every time I inspect an element the body of the page shrinks down to a third of the left half of the page. It is also happening randomly with the slider where the image shows on only half the page from time to time. If I refresh the page it corrects it until I inspect an element again. It is making it impossible to work on this site and I have disabled the theme and gone to a stock theme as well as one by one disabled plugins trying to figure out what is causing this glitch and I have yet to determine what could be causing this issue. How can I fix it?
If you're using chrome dev tools (assuming the dev-tools window opens separate from chrome, not in the same window) my guess is that your device toolbar may be toggled.
Click this to turn it off, as it's used to test your site on a different screen sizes and could be shrinking your screen whenever you inspect something.
It's possible that you have your Dev tools Emulator on which helps you emulate the web page in different device sizes. Try closing the emulator by clicking on it.
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.
The project I'm developing for recently switched to .Net4.5 and Visual Web GUI 10.0.4 and a context menu item that works in Firefox doesn't work in IE11 (our official supported' browser).
I can't post images here yet, so here's a link:
[img]http://i.imgur.com/oIEca4l.png[/img]
notice that the firefox windows has 'invoice together' while the IE window has arrows in a box, and that's it.
Here are all the properites for the menu item:
[img]http://i.imgur.com/vHB4Ak6.png[/img]
The only reference to it in the code is displaying a message box when the 'invoice together' is clicked.
I'm thinking it's an IE display issue, but I'm curious to know if anyone knows a way to fix it?
Thanks
I experienced the same or most probably very similar issue on one of several virtual machines. I have content menu on ListView control. There was no visible menu items' text and there were left and right arrow sliders on the menu.
The web site worked fine on FF, Chrome. Interesting thing was that this context menu problem was not reproduced on other virtual machines with IE11. Only on single one. IE version 11.0.9600.18053 / 11.0.24 (kb3093983) was used on all test machines.
I noticed a slight difference in font's rendering also. Font's size seems smaller.
What I did was applying back IE's default settings and restarting client's machine. This somehow fixed the context menu and font's rendering.
My self explanation is that something in "get font and render it" communication between browser and client OS went wrong. From this came wrong looking menu with sliders.
Hope this helps!
Reduce fonts size on IE, it would help.