Develop Reference

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).

How to hide html source code? Even when viewing source?

I found this website https://samy.pl/ and even with my HTML knowledge I can't find the source of his site?
If you type "view-source:" before the website it should bring up the source but it doesn't?
He blocked most or all ways to inspect his source.
How is this possible?

You can actually see the sourcecode using Internet Explorer, or Safari with IE 11 set as useragent.
I'm not certain how he does it, but it is some kind of JavaScript that checks some flag in Chrome that tells him whether or not the inspector is open, and if true he removes the body and updates page so everything disappears.
Using IE and inspecting the source should give you the answer :)

Website not working in Firefox/Chrome, but does in IE

There is a website that I must use at work quite a bit and the only browser it works on is Internet Explorer.
I'm presuming this is because the code is outdated/incorrect and includes javascript that only IE is able to read.
This is a problem, because I want to use Firefox or Chrome, they are much better browsers.
I believe the issue is Firefox/Chrome (hereinafter referred to as foam) not being able to recognize the following "onclick" command lines. When I press these buttons, the web page does not change as it should.
<button class="MenuButton" title="Create ICL" value="ADDICL" onclick="PageJump('ICLMain.asp?From=ICLHome')">Create ICL
So.... since this is not my website, I cannot re-write all of this code to fix it. It is a corporate owned underwriter website for creating a certain document.
There must be some sort of extension that enables Firefox/Chrome to read Javascript codes like Internet Explorer so that I can use Firefox/Chrome and still use this website.

Try to use chrome extension ie tab, https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=es. This extension emulate The ie Explorer.

I'm also facing the same problem(Javascript broke). The solution I found is to just add https:// before the link and reload the page and everything will work fine again.

Clicking a link in an iframe has no effect at all

In Google Chrome, I've noticed that clicking some links seems to have no effect at all:
clicking this link does nothing at all.
Here is a JSBin and a JSFiddle.
Is this normal, or does it indicate that there is some kind of bug with the latest version of Google Chrome? I've never had this issue before, and links like these used to work just fine for me.

If you look at your developer console, you'll see the following:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
See https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

This is because of the fact that you can't display external pages in iframes. This is a browser limitation mostly for security reasons

Javascript window.open() toolbar=no not functioning

I am attempting to open an html file in firefox with minimal extras (toolbars, menubars, addressbar, etc). Just the html contents of the webpage, and nothing else. I want to be able to do this within linux from the terminal. I also have to do it in such a way that it works across multiple linux machines running the same version of firefox. So this removes any possibility of using a profile. I was hoping there would be a simple parameter to firefox that would allow me to turn these settings off. I dont believe there is.
The only possibility I have found is through javascript's window.open. It appears the parameter specs to window.open arent even functioning in firefox 1.5.0.9. I have read that some of them were removed in firefox 3.0+, but have not found anything regarding the version I am using, 1.5.0.9.
This is what I am using to open my .html file using windows.open...
test.html:
<html>
<body>
<script>
window.open('./rel_notes.html','_self','toolbar=no,menubar=no')
</script>
</body>
</html>
And then just running 'firefox test.html' from the terminal.
Both the toolbar and menubar still appear when I do this. What am I doing wrong? Is there a easier way to do this?

If your browser settings allow pop-ups without notifications from X source (localhost i presume?) then the following might work:
window.open('./rel_notes.html',null,'menubar=no,toolbar=no');
window.open('','_self',''); //this is needed to prevent IE from asking about closing the window.
setTimeout('self.close();',500);

Taken from a link in the link bungdito gave me:
After a window is opened, JavaScript can't be used to change the features.
So by opening test.html, and then using window.open on _self, I am trying to adjust features to a window that has already been opened, using javascript.
Source: https://developer.mozilla.org/en-US/docs/DOM/window.open