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).
Related
I have to insert to HTML page image from facebook graph, for instance this one: http://graph.facebook.com/100004504487972/picture?type=large. In fact this link returns 307 Internal redirect.
I'm inserting this image with simple HTML img tag:
<img src="http://graph.facebook.com/100004504487972/picture?type=large" />
In most browsers it works well, but chrome for some reason doesn't follow redirect.
You can try this jsbin in different browsers to check out:
https://jsbin.com/yuhoqanisi/edit?html,output
I'm testing in latest chrome under ubuntu 16.04.
In fact it happen to be Ghostery extension for Chrome blocking image.
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)
I found this example of using tag to use responsive feature. It works fine in Chrome but does't work in firefox as expected. Firefox downloads image which is according to current firefox window width. Is it possible to download image according to window size dinamically on resize without any js?
There is bug reported regarding the srcset attribute
https://bugzilla.mozilla.org/show_bug.cgi?id=870021
As of right now is available in the dev channel of Chrome and in Firefox 34+. In both cases you’ll need to enable it. In Firefox, head to about:config and search for “dom.image.picture.enabled”. In Chrome you’ll need to go to chrome://flags/#enable-experimental-web-platform-features, enable that feature and restart.
Reference Site
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.
I'm working on a file upload utility based on Valum's Ajax-Uploader. The idea is similar to the Gmail attachment process. The user should be able to drag a file from the desktop into the browser window and onto the file upload area to get it to upload. This works fine in the browsers that support this functionality (Firefox 3.6+, Chrome 7+).
The problem I'm running into are the styles that should be re-drawn when the user:
Drags the file anywhere in the browser
Drags the file into the upload area
I have tested in the exact same browser versions on WinXP, Vista, and Win7. The appropriate styles are redrawn. However, in Windows Server 2003, they do not.
In Win2003, when I inspect the div that should be redrawn via Firebug, the "drop-area" and "drop-area-active" classes are applied correctly. Firebug even shows the correct style declarations, but the changes are never visible.
The only difference between FF and Chrome that I'm able to spot is that in Chrome, the "drop-area-active" style is displayed for a split second when the user drops the file.
I'm not positive that it is a Windows2003 issue, but that's the only OS in which I'm able to recreate the bug.
Edit:
If you're running Win2k3, try the Gmail drag'n'drop functionality. I can see the alternate styles in other OS's, but not Win2k3.
Edit #2:
Still seeing this issue in many different places. Anyone have any suggestions? I have submitted this as a bug to the Chromium Project. Issue 68632.
http://code.google.com/p/chromium/issues/detail?id=68632