I'm part of a web development team that is building websites using the Angular (1.x) framework. After a recent update to from Chrome 52 to Chrome 53, we've noticed one of our sites to become unresponsive.
The site in question is: https://www.slimnaarantwerpen.be/nl
The tab will become unresponsive when you resize the page (scale down, then scale back up) or when you toggle some of the map layers. (For example: Taxi) The Dev-tools are also unresponsive, so I'm unable to debug this issue...
This behaviour only occurs on Chrome 53.x.x on OSX. I've tested the above on Chrome 53.x.x on Windows and everything runs smoothly. Safari and Firefox also don't cause issues.
I can also confirm that this site runs correctly on Chrome 52.x.x, as I've run the site on that browser before updating to Chrome 53.x.x. I also used several testing laptops using 52 to confirm it's working, only to update them to 53 and notice the issue...
Does anyone have an idea if this is a common Chrome 53 issue? I read that changed some things under the hood to improve performance. What's the best way to contact Google regarding this issue?
The problem was that an element inside an ng-if had overflow: scroll in combination with height: 100% applied to it. Apparently, Chrome 53 (OSX) does not like that...
Removing either and changing the styling resolved this issue.
I hope they fix this soon, but in the meantime I hope this answer can help anyone who has a similar problem. :-)
EDIT: This issue also seems to be OSX 10.11-specific, as this does not happen on OSX 10.10.x
Related
Someone asked me to create a website for his sportsclub, I decided it try and make this webpage in ReactJs.
https://complexbjj-2a19b.firebaseapp.com/ this is the outcome, looks pretty and
works well on desktop.
It's pretty responsive layout wise.
So I was pretty happy untill I decided to build and deploy for production.
Sadly I found out that the webpage wasn't optimised for phones at all, leaving random blank spaces.
I tried allot of things, changing to PureComponents, Using React.memo.., etc etc.
Nothing seems to help, so now I'm here after hours & hours of trying to find a solution with my hands in my hair.
Does anyone know what could be causing this problem?
If you have the Google Chrome browser installed on your machine, you can try auditing your app in the inspector Audits tab (here is the doc). That could help you spot possible improvements.
I have updated my google chrome ,but Extjs performance is significantly reduced.I dont know exactly why.Can anyone share reason to this.
Note: New version is 53.0.2785.101
I gone through same problem last week. Chrome 52 version had some major bugs that was reason ExtJs application had some Performance issue. They have fixed some major bugs in v53.
If you have major issues with ExtJS then you should check it's Heap size and analyze it's memory consumption using chrome dev tool. It might help you to find out bottleneck of your application.
I'm using textAngular as a WYSIWYG text editor in an angular app. It is a fantastic library that is essentially plug and play. It works perfectly in Chrome and Firefox.
The problem is when I attempt to paste some text into the textAngular window in IE it simply doesn't work. It doesn't raise any console events, throw any exceptions or anything. On the network, it calls 4 URLs, which are then all aborted. They are:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
http://fonts.googleapis.com/css?family=Roboto:400,300
http://www.textangular.com/css/style.css
This network activity does not happen in Chrome and Firefox. So, I think that is where the problem is. But for the life of me I can't figure out what is going on. It doesn't look like this problem has been reported to the textAngular team or has been asked on stack overflow.
Does anyone have an I idea of how I can remedy the situation?
Edit:
Here is a plunk replicating the situation. It is the demo from the github repo, almost verbatim (the link to the textAngular links were dead, and I got ride of the initial text). I'm pretty sure that it is just a problem within the 1.2.2 library and I'm going to report a bug. The version on the main page is 1.2.0. Thanks for you help!
I tested your solution on IE 8,9,10 & 11 without any issues. I did however notice it the page was not formatting correctly no IE. It could be an issue with escape characters.
If you could provide some more details about your system, for example: IE version, the code you tried to paste etc. I think I may be able to sort this one out.
I'm looking into the file upload on IOS6 and know that this is possible with the usual link:
<input type="file" accept="image/*" capture="camera">
Altho, the most tutorials and issues I can find are mostly about the upload function. In my case I need to be able to take a picture inside mobile safari with the build-in camera.
I have set up a page to test this (no code, only the link I posted above), and when I take a picture the app (camera app) crashes without actually saving my picture. Is this normal behaviour? Do I need to add some code to upload the picture first? Altho this last thing doesn't make sence to me, since you need to add an already saved picture to a file upload link.
Any help in this would be greatly appreciated :)
You should not need anything more in the code to avoid crash. It should work the same as choosing a picture from the library. I have tested this on an iPhone 4S with iOS7 and my Safari crashes too. It does not crash every time if I take a picture with the front facing camera (smaller picture?). It also works if I only load the picture from the photo library.
This is a bug in iOS I think. I managed to go around it by restarting my phone. Sadly there is not much we can do on the web side of things, except inform the user that the feature may be buggy.
Probably the best recommendation, until Apple provides a fix in a future update, would be to caution your user to close down the rest of their Safari tabs. (This lowers the memory usage and prevents Safari from crashing when doing the 'Take Photo' path through file upload).
I have recently developed a couple of websites for a local vets and car valeter which look fine in internet explorer 9 and firefox but when viewed in internet explorer 6 or 7 it just goes wrong
In the car valeting all the boxes move down so they do not run as i have placed them (this only happens in IE6 not 7
in the vets website there is a lot of whitespace at the bottom of quite a few pages before you reach the footer. I know IE6 and IE7 are outdated but I would still like to fix the errors if possible.
Thank you for your help.
Dont forget the doctype on the top of your html file, otherwise the browser will
work in quirks mode instead of compatibility mode. Might solve your issue. Also no one uses IE 6 anymore, do not bother
check your site with the w3c validator and fix qny errors nd warnings, besides that there isnt much you can do
A helpful approach would be to use frameworks for JavaScript (jQuery) and CSS (BluePrint) for cross browser compatibility. It will take time to migrate to new coding, but will be worth it.
On a side note, if you do not mind redirecting the users of IE 6/7 to a page suggesting they upgrade their browsers, then you may try something like this in your JS:
var browserVer=parseInt(navigator.appVersion);
var browserName=navigator.appName;
if((browserName=="Microsoft Internet Explorer" && browserVer<=6) || (browserName=="Netscape" && browserVer<=3))
window.location="Incompatible.html";
Where 'Incompatible' is the page where you want to redirect. Also if you use above as a function, make sure you call it:
<body onLoad=yourFunction()>