Flicker in IE11 on page load, but not in developer mode - html

I'm getting flicker on page load or postback of a coloured page body in IE11, on externally hosted site (ie. not from local disk).
The odd thing is it goes away if I either:
Open F12 developer tools
Add the site to trusted sites
Add the site to restricted sites
I've got a VM with IE9 which works fine. Works fine on Chrome.
I obviously cannot use any of the above as a solution!!!
This sample code has one link that switches between two pages. I've removed everything else, javascript, css files etc.
--- page1.html ---
<html>
<body style="background-color:#000000">
Page 2
</body>
</html>
And then an identical page2.html that refs back to page 1.
Clicking on the link flickers the background from white to black each time, unless using any of the "fixes" above!

I have found another way to temporary fix this bug by adding an empty event handler through JS.
link such .js file to you html
fix_ie.js:
if(window.addEventListener){
window.addEventListener('beforeunload', function(){});
}

Related

Why Is My HTML and CSS Code Not Running Properly On The Internet?

I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.

CSS not rendered correctly on page load/reload

I'm trying to apply my CSS-file to my webpage.
When I load my website, I shortly see the site rendered correctly (with my CSS-styles applied), while the page is still loaded. When the page finished loading some of the styles I defined with CSS dissappear, for example the background-color or the alignment of some texts. Sometimes when I reload the page the site is rendered normally without me changing the browser or the code. I allready tried deleting the browser cache but nothing changed. I use Google Chrome. I can see that the CSS-file must be loaded correctly, as some of the styles are applied, and the page reneders correctly while the loading processes.
This is an image of my site while loading:
This is an image of my site after loading:
Thanks for your help.
It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.
If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are

Images published from GitHub Pages not displaying correctly

I am publishing some simple webpages (HTML, CSS, some JS) from my GitHub repository. When I display index.html in Chrome (55.0.2883.95, 64 bit) by clicking on the URL linked in this repository, the webpage is displayed, but as soon as I scroll down, the featured image disappears when it shouldn't.
The other working link is "Fees" at the top. Click on that, scroll up and down the page, and the featured image will similarly disappear.
I want to point out that I first published this repository/page in Nov. 2016 and the images all displayed fine. Recently I changed the domain name associated with the repo but normally wouldn't expect this to create issues. Also, when I simply zip and download the repo and open in Chrome locally, everything displays perfectly.
Lastly, this site works with CSS Grid so I have the appropriate flag enabled in Chrome. It's hard for me to understand why images suddenly don't display correctly using GitHub Pages!
EDIT Sorry if this question seems vague. Let me restate. Everything seems to initially load and display correctly in my browser. The issue seems to be triggered by merely scrolling down the page.
This code used to display correctly on GitHub Pages. I come back two months later and the same code doesn't work anymore. Image pathnames are all correct. It's evidently not a JS issue. Download the same code and it displays perfectly on localhost.
After reading this thread I realized that one of my extensions was causing the page to disappear on scrolling. Specifically, I disabled the Window Resizer extension and the problem was solved.

Empty IMG SRC trigger logout in IE

I'm developing a web system now, and have debugged a very strange bug just now.
First I describe the bug itself here.
Problem:
When visit http://mysite/, it redirects to login and do logout at once.
There is a page, which url is /site.php?arg1=xxx&arg2=xxx everything is well in chrome, but when I use the ie8, after this page loaded, the account is logged out!
Bug Location:
After a long term of debugging, I found that the point which causing the problem is:
<img class="item_thumbnail" src="" />
If I remove this tag, everything become good.
So I'm wondering: when the <img> tag render, what's its behavior? Will it request the login page? But everything is in mass with ie.
What cause this problem? And what will ie an non-ie deal with the img-src?
Need your help!
As I suspected, according to
Empty image src can destroy your site
Internet Explorer makes a request to the directory in which the page
is located. For example, if you have a page running at
http://www.example.com/dir/mypage.htm that has one of these patterns,
IE makes a request to http://www.example.com/dir/ to fill in the
image.
Safari and Chrome make a request to the actual page itself. So
the page running at http://www.example.com/dir/mypage.htm results in a
second request to http://www.example.com/dir/mypage.htm to fill in the
image.
Hit F12 and look in the network tab to see.

Chrome cancels request on link clicking befoe the page totally loaded. And FF doesn't

There is a front-end problem in my web-app:
for example I have a page with plenty of JS code executed on that page. There is a link on it like
Examle Link
I want to click on this link before page is loaded completely and actually I can do it in FireFox. Current page stops to loading and browser redirects me to clicked link.
But in Chrome nothing happens and I have to wait until the page will be fully loaded. In other case I see in DevTools that this request got "status=cancelled"
How can I change Chrome to treat my links in other way?
Chrome users don't want to wait till page is loaded if they want to go further clicking the link...
I had read about prerendering and similar stuff but still have no ideas how to resolve it...
I would appreciate for any hints.