AngularJS Ghosting in IE - javascript

Got a problem with an app wrote in AngularJS. Seems that in Internet Explorer I get ghosting of elements or elements not rendering correctly however in Firefox and Chrome it works perfectly. I updated AngularJS to 1.5.9 to see if it fixed any issues but however it doesn't. I've included an image of the issue below. If I resize the IE window then it redraws the elements and looks like the second picture. As mentioned this is only present in IE. Has anyone come across this before and knows how to fix it?
The issue
What it should look like and does after resizing the window

Related

Latest chrome update causing bug in website layout, need help to solve the issue

A website template of mine was working fine in the previous version of chrome.
But after the new update of chrome, my template is not working properly, and it works properly in every other browser....
Link to the page is:
http://nas.musemaster.net/tayn/#resume
Link to image (the error):
http://nomansamejo.com/layout.png
The scroll is not working properly in the chrome, something white appears on the content, and only redraw some of the elements...

Elements dissappearing in safari on ipad

Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.

Canvas Mouse Positioning Incorrect in IE10

I am having an issue with Internet Explorer 10 not properly registering the location of the mouse on the <canvas> element if it is not up against the top of the page. Open up IE10 and look at the links below.
The problem:
Click on this link and try dragging the nodes of the graph around:
http://ffi-server.no-ip.biz:257/test/good.html
Now, try the same thing on this page: http://ffi-server.no-ip.biz:257/test/bad.html
Interestingly, IE9 does not have this issue, and adding a <meta> tag to tell IE10 to render the page as IE9 does not solve this issue.
Possible solution?
I think I have found the problematic line of code, I just can't figure out how to correct it. Look at line 3044 in: http://pastebin.com/82GJBiEB
I just don't know how to correct it. I believe that IE10 is reporting a different e.pageY value than browsers which are working correctly. You can verify that by clicking on different areas of the canvas on this page: http://ffi-server.no-ip.biz:257/test/alert.html and see the reported values in IE10 and, say. Chrome.
Could anyone suggest a way to correct this issue?
Thank you for your time!
Try e.layerX, and e.layerY. I had a similar issue, and this fixed it.

error in Chrome when displaying inline-block li elements

I'm pretty new to web-coding and in my attempt to create jQuery based menu bars complete with dropdowns I have stumbled upon some vast differences between broswers. Below you can see that while FF and Safari are the same, IE is actually behaving and Opera is ok-ish, Chrome gets it totally wrong. As far as I can tell I have all the latest versions.
I removed the code from here and pasted it in: (doesn't want to let me link properly) so: jsfiddle.net/2hCR2/
Just in case, support for older versions of IE (6-7) is not required.
Right now I'm mostly concerned with the positioning aspect. Any assistance is much appreciated!
****EDIT:** After continuing to play with the chrome developer tools I realized that when I manually set the 1st list (pants/t-shirt) to display:block it displays as expected (exactly like FF and Safari in the image) so it appears that this is more of a javascript/jQuery issue not updating the DOM correctly(?). I also noticed that when I put the code is JSFiddle and ran the script in Chrome it produced the same error, but when I ran JSFiddle in FF (exact same fiddle link) it renders correctly.
It does not happen in Chrome Canary (version 24) but it does in stable (version 22). Apparently it is a bug which has been fixed.
You can either wait a month or two so that all Chrome users get the fix, or just use .show() instead of .show(0).

jQuery Roundrr plugin IE issue

I'm having issues getting jQuery Roundrr plugin work in Internet Explorer.
The page is at http://wppundits.com/cosvi/ and is working properly in Chrome and FF.
As you can see the 4 circles rotate in elliptical path when clicked, However in IE its not working and not showing any error either.
I guess it could be something to do with the z-index !!??
(I have made custom changes to the original jQuery Roundrr plugin.)
Thanks

Categories