My flutter web project does not show text completely in android chrome.
It should be 'المميزات' but it is cut from below so the dots and rest of 'ز' are not appearing.
It works on pc and mobile Mozilla Firefox -except one character-
Note: it was working at the beginning of the project.
I don't have enough repetition to post an image.
Add a white space at the end of the word or sentence for a workaround. I believe this will be fixed in the next update.
Flutter Web do have a number of issues with text rendering on web. But I'm not sure if there is an issue that your case fit into. If not, perhaps report it on github.
Some of the issues:
Text after hypen does not render
Missing text in standalone mode
Text is clipped in Firefox
All web issues on github:
Flutter web issues on github
edit: As pointed out in a comment, be sure to include code to reproduce your issue especially if you decide to report it on github.
I had the same problem. I solved it, by building my web build with the Canvas renderer with this command: flutter build web --web-renderer canvaskit.
CanvasKid renderer defintion:
This renderer is fully consistent with Flutter mobile and desktop, has
faster performance with higher widget density, but adds about 2MB in
download size.
More infos about this renderer on https://docs.flutter.dev/development/platform-integration/web/renderers
Related
In order to get images to assets from other websites (ie Firebase storage) to load, I have to run using flutter run -d chrome --web-renderer html. Everything works great and looks the same, except for this occasional random horizontal scrolling bar that's hard to explain. There's nothing actually to scroll, even though it shows up (see below). Has anyone seen this and know how to remove it?
This is a really weird bug that has already consumed half of my day.
I am creating a chrome extension and when developing the extension locally it looks fine (like I want it to look).
However, once I load the extension to chrome to test performance the UI looks a lot smaller.
I made sure both windows are at 100% size.
What is weird is that actual values change. Font that should be 16px in development becomes 12px in "production".
I have attached 2 screenshots:
DEVELOPMENT (How it is meant to look):
PRODUCTION (How Chrome renders it, once the extension is uploaded):
There you can clearly see the changes in font size and UI. Is this a known Chrome bug or something?
Any help or hint is appreciated since I feel kind of stuck!
Thanks!
maybe the answer of this thread could help you:
LINK
Seeing the images you attached, I can only assume that an ancestor tag (it could be the button or an even more ancestor element) uses a font size that conflicts with your "font-light" class declared 16px.
If by "testing locally" you mean opening the html page with chrome outside of a loaded unpackaged extension, then accept my advice to review your method.
The same html + css combo loaded in Firefox (almost certainly) would give an even different result.
It is also possible that the issue\solution lies somewhere else, but the concepts just outlined need to be taken into consideration.
I am trying to run an image gallery viewer. It currently works as expected in Google Chrome.
I have moved it to a windows phone to test the mobile Edge browser. The HTML, CSS and JavaScript all appear to be functioning but the img tags appear to be having some problems and aren't loading.
I have browsed the official Microsoft Forums regarding Edge etc. and can't find anything related to this issue.
Then simplified the code, and gives same error, that img tags dont show the actual img.
<html>
<head></head>
<body>
<img src='p0.jpg'>
<p></p>
<script>
document.querySelector('p').textContent = document.querySelector('img').src
</script>
</body>
</html>
When I view it in the browser, I see a small "broken image" icon in the far left corner, under:
file:///C:/Data/Users/Public/Documents/Gallery/pictures/p0.jpg
How do I show it in local (mobile) reference? Is there a problem with the image file? And how should I test websites for overall user experience as though I was a mobile viewer?
After some extensive testing myself trying to get the image to fail on load, I can't yet find a problem with it. Because of my lack of results, I have a feeling that the only possible problem would be that your image is either not copied over either, or that you're placing it in the wrong directory. It's often best practise to have a img folder to store all of your images in, and then you can move the entire file across. All I can recommend is that your image file is in the correct location that you're referencing (in this case, the same folder as your HTML file).
Another potential solution would be to try referencing images that are hosted online (do a Google search for something and then copy paste the full URL). Make sure it works on Desktop first and then try it on mobile. If it works, great - your problem is related to your own hosted image file / location. If it doesn't work, it may be worth delving slightly deeper and figuring out what's wrong with the device / browser.
Sorry this isn't a very useful answer, but I hope it helps you in some way
I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.
Problem:
When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. This behavior occurs in at least Safari and Chrome.
How to I keep everything in the proper, final place while the page loads?
Code:
HTML in question on codepad (with details changed for privacy reasons): http://codepad.org/GSGHYF0N
Stylesheet: http://codepad.org/Yr4ULwi0
Additional Info:
The most obvious thing that is out of place is the
<h2>Location</h2>.
Images are all the size indicated in the HTML and CSS.
This is not the problem where the entire layout shifts as one because a scroll-bar appears.
Resources
Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. However, StackOverflow won't let me post these links because of spam-prevention.
http://jsfiddle.net/QHeG8/
I can't replicate the issue but it could be caused by the webfonts loading and rendering.
That would explain why <h2>Location</h2> moves - because it's position relies on the width of the <h3>Tagline</h3>
You could try using standard system fonts to see if that resolves it.
Also if you have Dev Tools open that'll slow down page rendering and also disable your cache (if you have that option ticked)