How to enable HTML5 canvas text in Firefox? - javascript

I can see canvas (lines, drawings, etc.), but not canvas text in Firefox profile A.
I'm on Firefox 38.0.5 EME-free on Windows 7. I haven't done anything to the Firefox folder. I can see canvas text on my other profile B.
Here's an example of what I want to be able to see: HTML canvas fillText() Method.
Profile A: the canvas appears as a white rectangle.
Profile B: I see "Hello World! Big Smile".
I tried about:config and searched for "canvas", but the entries were the same in both my profiles.
In Detecting HTML5 Features - Canvas Text, it says:
Your browser supports the canvas text API
I get these logs in the browser console if I load the w3schools site:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsITaskbarTabPreview.invalidate]
WindowsPreviewPerTab.jsm:406:0
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
tryit.asp
POST ...w3schoolslink...tags/tryit_view.asp
[HTTP/1.1 200 OK 210ms]
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it.
tryit_view.asp
And the last two if I click "See Result" on the same w3schools page.
Don't tell me to reset Firefox. I've spent years customizing it just the way I want.

Is it possible that you don't have the used font in both profiles?
I have seen these rectangles as text in cases where I was trying to show "letters" that are not part of the used font. For example I tried to show musical symbols which are defined in unicode, but the most fonts I know don't support them.

Preamble
It seems this issue is not present in Firefox 41.0.1.
Fix1 - TL;DR
Set gfx.direct2d.disabled to false.
Fix2 - Alternative
When gfx.direct2d.disabled is true
Set gfx.canvas.azure.backends to cairo
Using Fix1 has the side effect of botching fonts in webpages and view-source (at least for me), while this can be used to keep direct2d disabled while still rendering canvas text.
I tested that after stumbling on this:
Bug 842521 - PDF.js won't render text when DirectWrite is enabled with both Skia and Cairo backends
The long answer for Fix1
While this is not really a programming question, in the hope that it gets migrated rather than deleted, I have a possible solution.
I ran into the same issue where my regular Firefox profile would not display canvas text while a fresh profile had no issue. Using safe mode was also ineffective.
Going through preferences in about:config, I eventually toggled gfx.direct2d.disabled to false and text in canvas was then available after restarting the browser.
The likely cause of gfx.direct2d.disabled being set to true is having disabled hardware acceleration by unchecking Use hardware acceleration when available in Options > Advanced.
Note that toggling that preference alone will not be considered by Firefox to reenable hardware acceleration, as that only happens when changing the pref layers.acceleration.disabled, which has apparently no influence over this issue.

Related

Website changes font-size of div upon changing its display property (only on mobile)

I'm writing my own site as a hobby (any html/css/js I know is self taught), but I've run into a issue that I can't seem to really understand (and thus I don't know how to fix it). I can't handle/fix this by myself unfortunately.
I tried taking away as much unneeded code as I could, reducing the site to the bare minimum where it still exhibits the unwanted behavior. I'm sorry for amateurish/hacky code, I'm not doing this professionally after all.
Here is a jsfiddle showing the code. It exhibits my wanted behavior: Click on any of the "Folders" and it expands and shows the "content". So far, so good.
If I now load the exact same code onto a site (I'm using netlify here), it still behaves as I want it to: Netlify link
If however I access it on a mobile browser (for reference I tried it on Google Chrome, Firefox and Brave browsers, all on Android) I get some behavior that I don't want:
If I expand one Folder, it works as intended, but if I expand the second folder as well the Folder name and its contents seem to change font size (they get noticeably bigger). If I close the normal one and reopen it it also changes size. For reference,
this is what it looks like.
It almost seems like me switching the display property to block changes the font size to something else, but I only defined one font size in the whole css.
I really don't know why this happens and I'd appreciate any help that explains it or points me in the right direction.
Thanks.
Edit: I managed to contact a third party who tried the site on their phone (iOS) and there the site did not exhibit the same weird/unwanted behavior. I'm not sure what exactly to do with that information.
I might have finally found a working solution to this weird and unexpected behavior. In your CSS, in the body section, add the following rules:
font-size-adjust: none;
text-size-adjust: none;
-webkit-text-size-adjust: none;
Those rules do not really have wide-spread support, apparently, and might change or their support get dropped at some point. One works only for Firefox, the other only for Chromium-based browsers, and yet another seems necessary for legacy Chromium-based. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
https://caniuse.com/?search=font-size-adjust
https://caniuse.com/?search=text-size-adjust
Only with all three of those rules did I successfully prevent this font scaling for mobile Chromium, mobile Firefox Quantum (the old Firefox <=68 was not affected), both on Android, and for Chromium mobile mode on a Linux desktop. At least as far as my tests indicate.
Although I still fail to understand how and why such a rule would even be necessary: There definitely is no other conflicting rule in your example to affect rendered font size. My very wild guess would be that, under certain circumstances, some mobile browsers do not apply font-size rules correctly to hidden elements, causing this obscure cascaded font scaling.
Not at all the answer, but the described behavior can be reproduced even on a computer (Ubuntu Linux in my case; non-android device) using the given netlify link in Chromium, when using the mobile mode in Chromium DevTools. Maybe by reproducing it this way, somebody gets behind the cause of this behavior.
Upon opening the second folder, the font-size is indeed set to something 42.073px or something similar, depending on the responsive mode selected in the mobile mode. This is only shown in the "Computed" tab of DevTools, but there is no rule for this size in the "Styles" tab. I don't see any apparent cause for this text size change, sorry.
A few notes, however, on your HTML code (though none of the below seems to solve your problem):
Better put the <script> tag inside the <body> tag, right before the closing </body>. Or put it inside the <head>, but then make sure it get executed after page load. Outside <body> or <head>, your <script> is somewhat in limbo – unexpected side-effects included.
Similar goes for your <meta> tag. Put it inside the <head>.
For valid code and to reduce and even avoid unexpected side effects, surround your complete HTML code with an <html> tag, and define a doctype, e.g. <!doctype html> at the beginning of your HTML. Validate your HTML, for example here: https://validator.w3.org/#validate_by_input

Firefox image loads partially then breaks

I'm seeing some unexpected behavior when trying to load images on firefox. In my web application, I've built a graph. When I hover points on the graph, a tooltip is rendered, and within that tooltip an image (along with some text). When I render this on firefox, the image begins to show loaded content, and then once fully loaded, is replaced with the broken page icon. (See imgur gif below).
The images are being loaded from Amazon S3, which could be relevant. Also, this tooltip is being rendered by Recharts library, in plain js, the component is being imported in my React app.
The line to load the image is simply:
<img src={image_url} width="336px" />
This occurs on my current install of FF (windows 10) as well as a MacOSX fresh firefox install (with no add-ons). This does not occur in any chrome installation (tested on 5+ computers) nor in microsoft edge.
I inspected the network calls to load the images and found only these differences (but you might be able to see something I am missing in the live link to the webapp below):
In chrome, the Referrer Policy was strict-origin-when-cross-origin, while in FF it defaulted to no-referrer-when-downgrade (however I locally set the firefox referral policy value (via attribute on the img) to strict-origin-when-cross-origin and origin-when-cross-origin, no change occurred).
Here is the chrome Accept header: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
versus the firefox: image/webp,*/*
Lastly, Accept-Language was different, with chrome en-US,en;q=0.9 when Firefox has en-US,en;q=0.5.
Here's a webm + gif displaying the behavior I'm seeing:
https://imgur.com/a/x66AWoc
Here's the live website where this is occurring:
http://52.53.193.14:3000/viewcount/esl_csgo/2020-10-11_09-11-21
As #Leandro pointed out in the comments, the problem was image size.
did you try resize your image to some smaller? You are using an incredible size for thumbail, you should use 2 images. I still believe you have two problems, 1) the size 2) the cross site security problem (resolved with politics on the server side)
I didn't know that the larger images would break, that certainly surprised me. I expect it might have to do with too many large images overloading the allowed memory of the page. (However this occurred even on the first load).

Browser specific text-layout bug

A fellow developer and I are on exactly the same Firefox version (41.0.1) using the exact same steps to reproduce a text-layout bug on our web application after hard cache refreshes using the same production server (no local assets), and he sees the bug but I don't. We tried on a 3rd developer's browser (same Firefox version) and he does not see the bug, so it seems isolated to this one browser instance. Both machines are identical - Windows 7 on Lenovo Thinkpad T420. It's a CSS text layout bug - text overflows the box onto multiple lines. I've linked to an image below.
Image of bug here
We have also tried:
Running the problem browser in private browsing mode.
Starting the problem browser in safe-mode (to disable plugins).
Doing a diff between the CSS source file each browser is seeing - they are binary equal
Does anyone have any ideas why this might happen or how else to try to debug it?
Edits:
Other things we have tried:
Reset zoom levels on both (ctrl+0)

Internet Explorer 10: text size changes itself randomly in Eclipse RAP application

Problem
I have an Eclipse RAP application, and as soon as I change some dropdown box value, random texts became changed in my application. They become bigger. You may need to know, that in Eclipse RAP all styles are inlined and calculated server side.
Steps to Reproduce
I open a tab inside RAP with a page with dropdown lists
Change the dropdown till random texts inside the browser become bigger (usually happens by first trial)
Investigation so far
I checked the JSON ajax request-replies, nothing is related to font change. Actually nothing is related to the tab widget in which I am currently and which has its font changed.
I attached a function to the div representing the tab inside debugger
using onpropertychanged event. I log the names of events. When I change the dropdown list and the tab text becomes bigger, there is nothing style.font* in the console. Other things like background color change display the events.
the last thing is hillerious. As soon as I click on inspect, and I "touch" the client area of my application with the mouse, all fonts become OK. So inspecting the problem is impossible:
Question
Did you see something similar ever?
Do you know about known issues
for IE, which could cause this?
Is there any workaround?
Update
So the problem is originated from my using custom fonts with #font-face. I realized the followings:
- Using web-font kit generated by FontSquirrel does not make any difference. IE loads then EOT (i checked with developer tools), but still the fonts are changing randomly.
- I tried a randomly downloaded TTF, same problem occours.
- if I remove the fallbacks from the css font definitions, there is no "font-change" phenomen described above
- if there is no fallback, IE uses the custom font always, but it seems to have calculation problems when it comes to the width of a text div. For example from my two word menu items only one word is shown (obviously the second word is word wrapped).
Solution
I guess the solution for me is to use native fonts. I don't want to spend my life with hacking around bugs of IE.
My suggestion is to look at this bug report.
From your image I can see that your doctype is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
which triggers quirks (refer here) mode rendering in browsers. So my suggestion is to try to change it.
pages rendered in quirks mode might not be able to take advantage of
features the browser supports when using standards mode.
in IE the CSS rules applied when the :hover pseudo selector are not
applied when using quirks mode (colour should change and pointer
should turn into a hand).

Ghost.js deployment on Azure websites does not show icons properly

I've been following the instruction on Scott Hanselman's blog for how to deploy ghost.js from source to an Azure Website. It mostly works, except the icons on the admin page show up as square boxes instead of the correct icon.
I enabled diagnostic logging according to the steps on this page but didn't find anything that looked suspicious (no error messages or anything).
Any tips on how I can debug this? I've tried following these steps multiple times, always with the same results.
Thanks
Ghost uses unicode characters for these icons. They are not images, they are rather normal unicode glyphs. If the font your browser is using by default doesn't have these glyphs it won't be able to display them. Some browsers will detect this (Firefox) and replace the glyphs from another font, while others (Chrome) might stick to the glyphs in the default font.
Try a different browser, and you should be able to see the icons, then change the font on your default browser.
Update 1:
Scott's instructions are missing a step. He asks you to comment the line in .gitignore that tells git to ignore checking in the CSS that gurnt just build in
# /core/client/assets/css
but you also need to comment the line under it to have git include the fonts as well
# /core/client/assets/fonts

Categories

Resources