Folks -
Longtime lurker, first time poster. I've found many answers here in the past, and have always appreciated the expertise. I'm a bit of a noob, so bear with me:
I have a landing page. It displays well in Chrome, Firefox, Safari, and older versions of IE. All of the above include the the Google ReCaptcha - no issues, widgets work, etc.
IE 11 turns this to mush. My graphic fails to load, and it seems the recaptcha moves itself to the full width of the page instead of the small part I've intended.
Oddly enough, if I grab the sides of the browser window and adjust the width in any way (wider or narrower) the image snaps in where it should be, and the page looks perfect. Likewise, if I inspect the element, the page loads exactly as intended.
This seems like it should mean something to me, but my knowledge is too limited to get exactly what I'm being told. Can anyone shed some light on this for me?
I can furnish source code and screenshots if that's required.
Regards, Cheers, and thanks for any thoughts -
CDM
#Romulo helped me tremendously with this issue. The entire page was being loaded by a script, and there were errors within the script itself that needed correcting. The solution required a style block to be moved, which solved the issue. This was probably a once-in-a-lifetime issue, but if you find this page and think this might be what you're dealing with, feel free to message me and I'll be happy to discuss further.
Related
It's a little bit difficult to ask a question, because I'm using mainly templated code for the outlooks of the (personnal) website I'm conceiving.
It's a template using html5/css3 and javascript (which doesn't seem to take a part in the issue I'm having).
So here it is : in firefox and explorer, the footer displays at the bottom of the screen even when the content of the page does not go that far. But in chrome, for a reason I do not grasp, the footer displays right under the content stop, leading to an ugly blank space from the end of the page to the end of the screen. Does anyone have an idea why?
I know it's difficult to answer without code, but since I only half grasp what's happening I can't really provide more information.
Thanks in advance!
Edit : https://jsbin.com/hozudepimi/1/edit?html,output
Added a bit of code if it can help
Alright, I'm at the end of my tether with this one. I've hosted the site at: http://loudcolor.com/brands/yolancris.html if anybody's willing to lend a hand.
The website is very heavy on image content, and has extensive use of some js/jquery plugins to bolster the user experience, which of course ain't worth a damn thing if you can't even scroll the site!
I don't seem to have any issues on desktop versions of the site. Webkit and firefox seem to be working pretty consistently. Though, whenever I load the site up on a touch device (iPhone/iPad) whether via ghosting (wifi and Adobe Edge inspect) or over a server the performance lag is huge, the thing won't even scroll. I appreciate that the site is heavy on image size - but I'm using lazy loading extensively to shave a lot of that off. With the exception of the home page, no page exceeds an initial load of ~300k.
Any help is greatly appreciated. I've been banging my head against a wall till the early hours now. If you guys need any further resources or details just let me know. Thanks.
Kyle
Just in case anyone else runs across a similar issue. The problems were the following:
• I had a container set to
overflow: auto;
• Which combined with a:
$(window).resize();
on a touch and scroll event ended up being a recipe for disaster - or in this case, really buggy scrolling on a touch device.
Hope this helps somebody. Happy coding ;)
I have a problem where Mobile Safari crashes when loading and manipulating the DOM with jQuery when the pages get too big.
I get the same problem on both iPhone and iPad.
What are the best way to troubleshoot mobile pages to find the error? Are there any known problems that might crash Mobile Safari?
I actually found the problem. It wasn't with JS as I thought, but with the CSS. I added class to make a CSS transition to fade in some elements. For anonymous users these elements had display: none; and probably never ran the opacity transition.
The strange thing is that the transitions was on exactly two elements. So why would this only crash on long threads with 100+ comments?
So the bottom line is: -webkit-transition crashed the page on mobile safari.
Had the same issue, for me it was -webkit-transform: translateZ(0); that caused the crash of Safari.
I know this question has been successfully answered but I just wanted to put my five cents in too as I have been banging my head against the wall over this one quite a few times:
As most answers have pointed out already it usually comes down to memory issues. Almost anything can be the last bit that finally tips over the "memory pile" much like a translateZ or anything else.
However in my experience it has nothing to do with the actual CSS (or JS) command in specific. It just happens to be that the last transition was one too much.
What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.
The main issue with any iOS app is memory usage. So, it is likely that your pages are using too much memory.
Mobile Safari use some clever technique so that not the whole page has to reside in memory at any given time, only a portion of it. Maybe you could check if anything in your page defeats this mechanism or makes it less effective.
In any case, to give more up to the point suggestions, more information about your page would be really great.
By the way, you could have some hints from the crash log that the device store. Check to see if you can find it under Settings:
General
About
Diagnostics & Usage
Diagnostics & Usage Data
If it's a memory problem, you should find something like "signal (0)"; not sure if this can only mean "killed due to memory usage", but I usually take this for granted when I found a signal (0).
Otherwise, it might tell you what is wrong...
Hope this helps.
There are both memory limits and Javascript execution time limits, though it's a little fuzzy as to how you may actually hit those. Common reports come in that a page with a size greater than 10MB will have issues, and Javascript execution is limited to 10 seconds.
See Apple's documentation for more info.
I recently had an issue with mobile safari crashing on web-app pages containing a lot of images (30+ were enough) and a few transformations for the menu. After a lot of trial and error, I settled with a solution similar to what LinkedIn does, but for infinite scrolling using angularjs. I used requestAnimFrame and two expanding/shrinking divs (with js style attributes) on the top and bottom of the list to remove all image containers (with other stuff overlayed on top) except for a few ones which are close to the viewport. Scrolling performance (native, no js) is fine and memory consumption is in check.
I had a similar problem, the web page worked like a charm on android devices and crashed on IOS (iphone and simulator).
After a lot of research (using also the ios_webkit_debug_proxy) I found that the problem was connected to the jQuery ready event.
Adding a little timeout solved the problem. My application was also using iframes.
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});
I have a site that I've implemented flexpaper on and it's working beautifully, or so i thought. I had a user email me yesterday because she was trying to view a document and couldn't because it was so small.
Turns out when flexpaper loaded the document in, it set the zoom to -3%, I don;t know if she realized it and was just complaining about the fact that it loaded that way, or genuinely thought it was broken. Changing the zoom is easy enough, but rather annoying to have to do it every time you load a document.
I don't know if it had the same behavior in IE, but she had this problem in firefox. On both my machine, co-workers machines, and her co-workers machines, it works fine, but we are all running vista and 7. Once we loaded up an XP machine, the zoom problem showed itself.
I know there's a zoom function in the API so I can hard set the zoom, but I'm interested to know if anyone else has come across this and if anyone knows what the cause is. I would like to fix it if it's something that can be fixed.
Never figured out why it did this, but changing the zoom settings, setting fitwidthonload to false and scale to 1 made it work just fine.
There is a page that uses PHP to fetch search results from Google Search API and then it puts the results on the page some funny way in a circle. The code may look crappy but seems that it works more or less fine in Firefox. When you enter a search query and click submit button or Next/Previous links, it fills the wheel with results. The problem is its work in IE. It works there very slowly and then it doesn't clear the wheel before filling in new data, but puts it over that. My friend asked me to help him with this code. Please give me a piece of advice how I can fix it. Thanks so much!
Raphael runs very slowly under IE documented here.
As I understand it, VML itself in IE is fast enough, but the Raphael layer has some inefficiency.
I see you're using Raphael.js, which renders vector in VML/SVG (depending on browser). IE8 has degraded support for VML, unfortunately, and I hear it's also quite a bit slower than IE7. BTW, in IE7 it's kinda funny looking.
In terms of Raphael, it may be something as simple as resetting some context, I'm not sure. I've looked at Raphael before, but never used it.