I have a very irritating issue on the live site I'm designing for a client. I've dug into the CSS and HTML of the site to no avail. This only occurs in Chrome. The work in progress can be found at live.dancingsheepcoffee.com
Background:
Using Wordpress as CMS, theme designed with Underscores (_s)
Also using 960.gs system to aid layout design
Issue only occurs in Chrome; IE, Firefox, Safari, all display great.
Here's the breakdown:
On a virgin load of the site, the page displays as designed, issue free.
Upon a refresh (or second visit) the page loads "zoomed in" almost 200%, for no apparent reason. Text, navigation, headers, sidebar, and even the tiled background image. Site-wide. The main logo seems to be unaffected.
Zooming out and then back in (i.e., zoom to 90% then back to 100%) 'fixes' the page and displays as designed.
Also following the link to the same page from the menu bar loads the page correctly, however the content "jumps" sizes before displaying the correct content.
Content box remains at 960px wide (except when user toggles zoom, appropriately)
Background image also "zooms" on page load but then displays correctly when resolved above.
And the worst part is, I can't duplicate this on my main work computer, but the issue displays on every other computer. The way the issue works, it sounds like it's something on the client side, as the web server seems to render the page perfect every time, but perhaps the cached version isn't working. A thought to consider.
I greatly appreciate the time considered and help with this issue. I'll provide any applicable code to aide troubleshooting. Thanks again!
I've created a HTML + PHP simple page with some javascript that provide from google like adsense and google plus button.
The thing is the page is very short. I meant like not much content on it and I'm curious that why when the page is fully loaded like everything appeared and nothing missing, but the bar on google chrome or like firefox is still loading?
I did test removed the javascript for ads and button and it still having the samething
Is this normal? or maybe something wrong in my code that I should look at?
Open the developers tools (Ctrl-Shift-I in Chrome), go to the network tab and load your page, you'll see exactly what component is taking what time.
Most clever add-ons / plugins like google+, Analytics, etc. load when your own content is completely loaded so you might see some action after the page is visually done.
Edit: The developers tools in Chrome can easily be reached from the menu as well...
Check out http://tools.pingdom.com/fpt/
It will let you know what is still loading.
If nothing pops out then your JavaScript is probably in an infinite loop.
I have been developing a website for a University coursework, and at the moment, i have managed to get the features i want.
The website works using jQuery,AJAX and PHP to allow the user to view articles and media that goes with each article. My problem is that the site works as it should on my laptop, on FF4 however it does not work on my IE9 or other browsers, I have given the link to a few people and they all encounter the same problem.
The problem is that when you click the story on the left (thats how you navigate) it fades the text as it should, but it is meant to load in the next story aswell.... If you guys could help, that would help alot.
Link to website: newspaper.nmyster.co.uk
Thanks
IE8 is bugging out on this line:
console.log(storyId);
I'd suggest commenting this out.
If you enable debugging you should be able to see the same error.
These kind of problems always occurs by HTML and JavaScript support of broswer. First of all you shold validate your HTML by W3C validation. If the problem still persists than carefull check your javascript or jquery.
I have my site and it looks great on FF, SF, IE8 but on google chrome it shows a blank page, but if you click on view source, it is there !!
on js console I got "Failed to load resource".
Also I have the same site on my localhost and it works great on chrome !!
My site: http://grupooak.com
take a look on chrome and if you know how to fix it , or a tool to debug it and find the issue lmk :)
Thanks !!
btw the site was developed on php (akelos framework)
Sometimes, if you try several times you can get the page, but it gets stock if you click on any link
You need to make sure the DOM is valid, as your html seems messy I would advise you to fix the following errors:
http://validator.w3.org/check?uri=http://grupooak.com/app/%3Fak%3D/account/sign_in/&charset=(detect+automatically)&doctype=Inline&group=0
Just a thought but try loading the page without any javascript files, and if the page loads, add one back in a t a time testing if it still loads, when you add the javascript back in and the page fails to load, let us know what that file is.
Its could be one of the following:
Your server is failing to respond to the call, unlikely
there is a memory leak in the javascript files, causing the brows to focus on the file which does not continue to load the file.
Reasons for this is if you go to the url: view-source:http://grupooak.com/app/?ak=/account/sign_in/ in Google Chrome, you will see the whole response, meaning that it is something that is loaded into the browser that's the issue.
If you inspect the element of the page you will see that it stops loading loading the page after the first javascript include, try UPDATING Your Libraries versions.
Have you tried disabling caching and/or output encoding?
Something similar happened to me before, and it was related to the Mime type.
If that's the case, take a look at this article: http://www.dyeager.org/post/2009/01/php-xhtml-mime-type-caching
maybe fix this tag.
<img style="width: 95px; height: 113px;" src="/app/images/homepage10.jpg"
also look at the developer tools in chrome they will point you to this error
/app/?ak=/account/sign_in/ Failed to load resource
info about developer tools
http://code.google.com/chrome/devtools/docs/overview.html
First of all you should have a look at the W3C's HTML validator output, correct all of the errors, and try again. I guess that it will solve your issues with Chrome.
When I inspect the computed styles in chrome, the html element's height is 0. This might explain why the page is blank.
It's your rotator script. The first argument must be a beforeLoad event object.
The problem revolves around a jQuery gallery called 'Galleria'. It's quite aesthetically pleasing and since my client is a Photographer, I thought I'd display all of his images in a Galleria gallery.
You can see the site, in it's testing version, here: http://jeremywebbphotography.com/testing/index.php - (if things are changing, that's because I'm working on it right now).
Basically, the problem is: if you browse to any of the gallery pages they appear to work fine. Hooray! Except that, after looking at any sort of random number of them, after a while the images stop loading and appearing. The thumbnails will appear, but if you click any of them the image will appear briefly then suddenly disappear. I've worked countless hours on this site and only now do I discover the flippin' problem.
It's not going to be easy for me to integrate a new gallery solution since this one has been set up by me with a very specific structure that did take me hours and hours to do.
So far I have only found the problem in Safari, but I believe it may also happen in other browsers. The problem can be fixed by restarting the browser, but obviously when providing a professional service to my client this clearly isn't good enough for him or the users. The thing is, I know of no way to trigger the error - it just seems to happen randomly.
I need some serious help. I don't have the time or patience to redesign this all over again with a new gallery.
I'm using jQuery's supplied code. Also, Galleria provides this code in jquery.galleria.js - If you can make any blooming sense out of it... I guess it's sort of pointless posting this, but hey...
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){4 q;q=$.23.7=5(k){6(!q.1o()){Q J}$.1p(q.1b);4 l={Z:\'.1q\',K:E,10:E,1c:5(a,b,c){},1r:5(a){}};4 m=$.11(l,k);1d(4 i 24 m){6(i){$.7[i]=m[i]}}4 n=($(m.Z).R(m.Z))?$(m.Z):3(B.12(\'1e\')).25(8);4 o=$(B.12(\'1e\')).u(\'1s\');4 p=$(B.12(\'1f\')).u(\'1g\');n.u(\'1q\').13(o).13(p);Q 8.1t(5(){$(8).u(\'7\');$(8).1u(\'L\').1t(5(i){4 b=$(8);4 c=$.26?$.11({},m,b.27()):m;c.10=$(8).R(\':28-S\')?J:c.10;4 d=$(8).T(\'a\').R(\'a\')?$(8).T(\'a\'):J;4 e=$(8).1u(\'F\').C(\'M\',\'U\');4 f=d?d.9(\'1v\'):e.9(\'1h\');4 g=d?d.9(\'14\'):e.9(\'14\');4 j=1w 1x();6(c.K&&(N.r.t&&N.r.t.V(/\\#/,\'\')==f)){b.G(\'.D\').W(\'D\');b.u(\'D\')}$(j).29(5(){$(8).9(\'1y\',e.9(\'1y\'));4 a=d?d.T(\'F\').u(\'1z 1A\').C(\'M\',\'U\'):e.2a(E).u(\'1z\').C(\'M\',\'U\');6(d){d.2b(a)}6(!a.1B(\'1A\')){4 w=1i.1C(e.v()/e.y()*b.y());4 h=1i.1C(e.y()/e.v()*b.v());6(w<h){a.C({y:\'1D\',v:b.v(),1E:-(h-b.y())/2})}s{a.C({v:\'1D\',y:b.y(),1F:-(w-b.v())/2})}}s{N.1G(5(){a.C({1F:-(a.v()-b.v())/2,1E:-(a.y()-b.y())/2})},1)}a.9(\'O\',f);a.9(\'14\',g);a.1H(5(){$.7.X(f)});a.P(5(){$(8).u(\'P\')},5(){$(8).W(\'P\')});b.P(5(){b.u(\'P\')},5(){b.W(\'P\')});b.1I(a);a.C(\'M\',\'2c\');c.1r(3(a));6(b.1B(\'D\')){$.7.X(f)}e.1J()}).1K(5(){b.2d(\'<1f 2e="1K" 1L="2f:2g">2h 2i 2j: \'+f+\'</1f>\')}).9(\'1h\',f)})})};q.1M=5(a){Q $(a).R(\':1N-S\')?$(a).G(\':1O-S\'):$(a).1j()};q.1P=5(a){Q $(a).R(\':1O-S\')?$(a).G(\':1N-S\'):$(a).1Q()};q.1o=5(){$(\'1R\').13($(B.12(\'1e\')).9(\'1S\',\'1k\').C({v:\'1T\',y:\'1T\',M:\'U\'}));4 a=($(\'#1k\').v()!=1)?J:E;$(\'#1k\').1J();Q a};q.1b=5(a){4 b=$(\'.1s\');4 c=$(\'.7 F[O="\'+a+\'"]\');6(a){6($.7.K){N.r=N.r.1v.V(/\\#.*/,\'\')+\'#\'+a}c.15(\'L\').G(\'.D\').W(\'D\');c.15(\'L\').u(\'D\');4 d=$(1w 1x()).9(\'1h\',a).u(\'2k\');b.1U().13(d);b.G(\'.1g\').2l(c.9(\'14\'));$.7.1c(d,b.G(\'.1g\'),c);6($.7.10){d.C(\'2m\',\'2n\').1H(5(){$.7.1j()})}}s{b.G().2o().1U();$(\'.7 L.D\').W(\'D\')}$.7.16=a};$.11({7:{16:\'\',1c:5(){},X:5(a){6($.7.K){$.1V(a)}s{q.1b(a)}},1j:5(){4 a=$(q.1M($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)},1Q:5(){4 a=$(q.1P($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)}}})})(3);3.11({z:17,x:17,1p:5(a){3.x=a;4 b=r.t;3.z=b;6(3.H.1l){6(3.z===\'\'){3.z=\'#\'}$("1R").1I(\'<1W 1S="18" 1L="M: U;"></1W>\');4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b}s 6($.H.19){3.A=[];3.A.I=K.I;3.1a=[];3.Y=E}3.x(b.V(/^#/,\'\'));2p(3.1Z,2q)},20:5(a){3.A.21(a);3.1a.I=0;8.Y=E},1Z:5(){6(3.H.1l){4 a=$("#18")[0];4 b=a.2r||a.1m.B;4 c=b.r.t;6(c!=3.z){r.t=c;3.z=c;3.x(c.V(/^#/,\'\'))}}s 6($.H.19){6(!3.1n){4 d=K.I-3.A.I;6(d){3.Y=J;4 i;6(d<0){1d(i=0;i<1i.2s(d);i++){3.1a.2t(3.A.2u())}}s{1d(i=0;i<d;i++){3.A.21(3.1a.2v())}}4 e=3.A[3.A.I-1];6(e!==17){3.z=r.t;3.x(e)}}s 6(3.A[3.A.I-1]===17&&!3.Y){6(B.22.2w(\'#\')>=0){3.x(B.22.2x(\'#\')[1])}s{c=r.t;3.x(\'\')}3.Y=E}}}s{c=r.t;6(c!=3.z){3.z=c;3.x(c.V(/^#/,\'\'))}}},1V:5(a){4 b;6(3.H.19){b=a}s{b=\'#\'+a;r.t=b}3.z=b;6(3.H.1l){4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b;3.x(a)}s 6(3.H.19){3.1n=E;8.20(a);4 e=5(){3.1n=J};N.1G(e,2y);3.x(a);r.t=b}s{3.x(a)}}});',62,159,'|||jQuery|var|function|if|galleria|this|attr||||||||||||||||||location|else|hash|addClass|width||historyCallback|height|historyCurrentHash|historyBackStack|document|css|active|true|img|siblings|browser|length|false|history|li|display|window|rel|hover|return|is|child|find|none|replace|removeClass|activate|isFirst|insert|clickNext|extend|createElement|append|title|parents|current|undefined|jQuery_history|safari|historyForwardStack|onPageLoad|onImage|for|div|span|caption|src|Math|next|css_test|msie|contentWindow|dontCheck|hasCSS|historyInit|galleria_container|onThumb|galleria_wrapper|each|children|href|new|Image|alt|thumb|noscale|hasClass|ceil|auto|marginTop|marginLeft|setTimeout|click|prepend|remove|error|style|nextSelector|last|first|previousSelector|prev|body|id|1px|empty|historyLoad|iframe|open|close|historyCheck|historyAddHistory|push|URL|fn|in|insertBefore|meta|data|only|load|clone|replaceWith|block|html|class|color|red|Error|loading|image|replaced|text|cursor|pointer|andSelf|setInterval|100|contentDocument|abs|unshift|pop|shift|indexOf|split|200'.split('|'),0,{}))
I don't have Safari installed, but I can recreate the bug in Chrome somewhat consistently now, and I can see from Chrome's debugger that the reason it's failing is because it's hitting the else part of the if statement in $$.onPageLoad = function(_src) on line 283 of the unpacked source, because _src is empty. It only happens on the first load of a page (sometimes). This makes me think that the onload event isn't waiting for images to be completely ready. Google led me to a page talking about Safari's page loading, which points out that
With most browsers, they will wait
until the page is loaded, all images
and stylesheets and scripts have run,
and the page has been displayed before
they fire onload. Safari does not.
In Safari, it seems onload fires
before the page has been displayed,
before layout has been calculated,
before any costly reflows have taken
place. It fires before images have
completed decoding
So, try adding a delay before invoking the galleria code on the ul, or check that the width of the first image is > 0 before invoking the code.
You can find the full source for galleria here: jquery.galleria.js.
And for what it's worth, the gallery seems to work quite well in Firefox.
I tested in chrome (WebKit) - everything seems ok here, until one time - it loads image i want to and then goes to last one (i opened gallery 2, picture 27... and then whatever image i clicked on, after 0.5s it returned back)
Plus, you have one wrong element - </br> instead of <br/> in menu.
Running it through the w3c validator shows 17 errors.
It's certainly worth fixing any errors like these to get a more consistent cross browser experience.