Tuesday, April 15, 2014

Page hanging on load in SharePoint–SOLVED!

I recently had an issue which manifested itself specifically in the date picker in SharePoint 2010 where it took around 3 seconds for the picker to show after it was clicked. The error occurred regardless of browser (Chrome, IE10, IE11) and regardless of operating system (Windows7/8, OSX) – but somehow it did not show on my Surface 2.

I tried to investigate the issue with Fiddler and network monitor in the browsers dev tools, but didn’t see anything which made me trigger. I then posted the questions among my peers and Ed Musters reminded me again of using Fiddler, which was a week ago. Today I had the courage to revisit the issue and start investigating.

What did I find… a request from my page hanging on load. The page tried to load a resource from https://_layouts/Folder/somestyles.css.

Hmmm… no host name in that request. I next examined the html of the page and found the following line:
<link rel="stylesheet" type="text/css" href="//_layouts/Folder/somestyles.css"/>

Notice the double slashes in the start of the link.

Ladies and gentlemen, THOSE SLASHES ARE THE CULPRIT!!

Note: // is ok in scenarios where it's followed by a resolvable DNS hostname, where // is translated by the browser to either http:// or https:// depending on which protocol your page is served from.

The resource had been included via setting the AlternateCssUrl property, and the failing code looked as follows:

cssUrl = string.Format("{0}/{1}", site.RootWeb.ServerRelativeUrl, cssUrl.TrimStart(new[] { '/' }));

What happens is that the server relative URL of the root web is “/” and the string format part adds another slash. The code should have checked if the root web was on a path named site collection or not (length > 1), or trim/replace double slashes in the line after.

Changing  the URL to start with just one slash did the trick and the date picker now loads before you can say CODE-REVIEW.