Why would renaming HTML file fix an element positioning bug in Chrome? - javascript

I am writing a simple run and jump game using only a few hundred lines of vanilla JS, HTML and CSS. So far nothing complicated whatsoever.
My game was running okay, then without warning broke - suddenly the player element was offset down and to the right. Couldn't see any reason in code for this, and realized that just renaming the html file fixes the bug.
Also, opening the html file in firefox works perfectly with no bug (using original "chrome-buggy" name).
Any clue what could be the reason for this?
I don't care so much about making it work - since it already works with a new html file name. I'm interested in understanding what could have caused the issue.
Thank you

Fixed. Cleared all browser data. Clearing "cached images and files" was not enough, and reload/hard reload was not enough.
I will check "disable cache" under "network" in dev tools from now on to avoid this problem.

Related

Using Chrome Dev Tools to find out what's causing FOUC

I have been fixing up a sites JS, moving it to the bottom, minifying, etc. And it's all gone okay except on the blog (of an e-commerce site), as the page loads it's causing the header to be un-styled for a second or so, but it isn't happening on any other part of the site, even though they share the same CSS/JS. The blog is image heavy, but with images disabled (and I've tried disabling scripts too), it still happens. It's only happened since I've made changes, which I can't revert simply, but the changes are all positive and should help if anything. I can't see any JS causing it (as I removed the scripts to see if it was in there) and it doesn't happen in FF.
I would share a link but it's behind a closed staging server. And I could provide code but I'm not sure what, and there's a lot.
So, I had hoped I could use Dev tools to figure out what's happening, possibly the timeline view or something. I just don't know how I'd go about doing that.
Any advice?
Ed: I used the network tab on both the staging and the live site, as you can see from the image, they're identical, the css is the first thing loaded after the actual page, and on the live site it's actually ga.js. So it's even more of a puzzle now...
Don't worry, figured it out... It was the Stylebot Chrome Extension.. No idea why it was causing it now after making those changes though, and why it didn't affect the live site. I had no styles defined in it for this domain. A bug I guess.
Cheers all the same :)
Timeline tab in the dev tools is for benchmarking / site performance testing. If you want to know what's happening as in what content is being loaded, when and where, you can use the network tab for that.
It's also a common practice to stuff console.log() everywhere with some relevant message so you know when some part of code is being run.

Javascript caching on iPad HTML5 fullscreen web application

I'm having an problem where the iPad insists on loading an old copy of a .js file, instead of the current one. Strangely enough, this only happens when the page is in fullscreen mode, not when it's being run from the page.
I'm not using any kind of cache manifest;
When I open the page on Safari, it behaves as dictated by the latest version of the .js;
When I open the page through the icon, it behaves as dictated by the old .js;
Killing the running application, deleting the icon and then creating it again doesn't solve the problem; it's still using the old .js, even while in full screen.
Does anyone have an idea of what's going on?
-- update --
This seems to be an iOS 5 bug.
-- Workaround (a.k.a. ugly hack) --
Simply add some fake http params to the script tag, so that the cache thinks it's entirely another JS:
<script src="js/pentaho-jqm-repository.js"></script>
Becomes:
<script src="js/pentaho-jqm-repository.js?fkn-ios-bug=1"></script>
After using the aforementioned workaround (adding a fake parameter to the URL) and then changing it back, strangely enough, the problem stopped happening. Of course, in a production environment, one wouldn't be able to do this, so I think I'll just start numbering the js versions so that the end user won't have this problem.

Whitescreen issue in IE9 - Removing iframe

I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.
I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.
On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)
Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.
I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.
There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.
If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.
Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.
It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.
One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.
In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.
I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.
Here is the fix-
Html:
<div id="container">
<iframe src="loremipsum.pdf"></iframe>
</div>
Javascript:
//Ruins my entire week
$("#container").remove();
//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove();
I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.
Pseudo-code below:
$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
$ctrl.removeIframe(); // remove the iframe here
});
As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.

Sometimes FCKeditor doesn't load in Firefox

I am unable to replicate the problem when I want to but it seems like every now and then, my site using FCKeditor will load the interface but not the content (Clicking the buttons don't do anything). No javascript errors show and once it starts doing it, it usually is tough to get back to normal. The way I found to work best is to click the refresh button multiple times in a row, then the FCKeditor loads correctly. I have only seen this in Firefox
Has anyone else run into this problem or know a solution. It is a little annoying for me but I am afraid my client would be really confused
I have experienced the phenomenon you describe in FCKEditor's successor, CKEditor. Somehow, the IFRAME that contains the WYSIWYG content doesn't get loaded. What always helps is switching to source code view and back, but that's no solution.
I have seen the problem described on the Internet but with no solution.
Caching is not the problem, I think. Sometimes, if you press "reload" 20 times, it will break at the 21th time, and work again on the 22nd time.
What minimized the number of occurrences for me was to activate the thingy to the editor's bottom that shows the element path (body > p > span, I forgot it's name). I don't now why but since I turned it on, it very rarely breaks any more.
I have had this problem. I solved it by pre-loading FCKeditor in a hidden iframe during the login process so that when it got to the pages where it was used it was already in the cache.
i would strongly advise to upgrade to CKEditor which can not only be spelled out verbally without offending anyone, but also optimizes the loading time to minimal. I find it much more responsive than his F- friend.
I encountered this problem with firefox (not reproducible) and chrome (reproducible).
The solution that worked quite well in both cases was to wait for some milliseconds before initializing CKE :
setTimeout(function() {textarea.ckeditor({customConfig : 'custom/schnonfig.js'})} , 100);

IE 8 Frameset / Javascript error

Ok here's the problem. I have a page that works in FF3 and Safari4 no problem. It's IE8 that's causing the issue, go figure. I remember in the Netscape days when it was the opposite.
Anyways,
So i'm building a website for a friend - i have three pages. the first two work fine on their own, but when they are combined in a frameset in the third (main.html) in IE8 all hell breaks loose. here are the pages:
www.wither.org/Karoline/navigation.html
www.wither.org/Karoline/portfolio.html
http://www.wither.org/Karoline/main.html
& my CSS if you want it: www.wither.org/Karoline/css/styles.css
if anyone can figure out how to fix this, i'd be eternally grateful. It's completely baffling to me and i've tried all kinds of options. i upgraded jquery to the latest version but then my scroller didn't work and i can't dive too much into the javascript code right now.
Please if you could help out, it would mean a lot to me. this has to go live sometime tomorrow.
There is a JS error when executing the following line of code document.getElementById("loading").style.display = 'none';
in the portfolio page.
Apparently, the element with id 'loading' is not being found. However, if I continue execution of the JavaScript on the page (from within the debugger), there are no issues, and the behavior is the same as in Firefox. This is indicative of a concurrency issue - the element 'loading' is not present in the DOM yet, but the script is attempting to change the element's style.
In order to fix this issue, you will have to ensure that the 'loading' element is present in the DOM before its style is being changed. In fact, you could delay the execution of the onload event handler (using window.setTimeout), until a point where the element is present in the DOM.
What's the actual javascript error?
And IE does have an issue in regards to invalid/broken markup inside of frames, I would try
a) commenting out each script and see which causes the js error
b) if commenting out all the js did nothing it might be related to the invalid markup inside of a frame issue, in which case I'd ditch frames alltogether.
yeah....
so thanks so much for your help. problem solved and i figured the other CSS error. should have picked up on that one earlier.
so site is working and if you want to see what happened with your help,
http://www.wither.org/Karoline
it works perfectly cross platform. made the deadline with hours to spare. thanks SO much. can't believe how well this worked.

Categories

Resources