Search code examples
jqueryjquery-uiprefixfree

jQuery slider script works locally, breaks on server

I'm stumped: a landing page that I built works perfectly locally, but completely breaks when I upload it to our server.

Here's the page: http://register.lot18.com/slider/google/

The white box in the middle is supposed to be perfectly centered; as you progress through each step of the form, the next step is supposed to slide in from the right. The positioning/sliding is done with /js/slider.js and jQuery UI. If you download the page and view it on your local machine, it should look exactly right.

Where do I even start with debugging this? The page already works locally, so basically everything I'm trying is just a random guess.

Even stranger: it doesn't break 100% of the time. If I sit there and keep refreshing the page, maybe 1 out of every 10 attempts, it'll display perfectly. Then I refresh and it's broken again.

UPDATE: Here's screenshots of what I'm seeing, both from Safari 6 on OS X:

Local: https://dl.dropbox.com/u/547222/lp-local.jpg
Server: https://dl.dropbox.com/u/547222/lp-server.jpg

UPDATE 2: When I remove PrefixFree (js/prefixfree.min.js), the page renders as if there is no stylesheet at all – but again, only on the server and not locally. A side effect of PrefixFree is that it takes external stylesheets and inserts them inline on the page. So is the external stylesheet not getting served with the correct content-type or something?

UPDATE 3: When I try to validate the CSS by direct URI, I get this error from the W3C validator:

I/O Error: Unknown mime type : binary/octet-stream

What does that mean?

Solution

  • I think I got it...the CSS is being served up with the wrong MIME type: binary/octet-stream instead of text/css. I never noticed this because I use a jQuery plugin called PrefixFree on the page, and a side effect of using it is that your external stylesheets get inserted as inline styles on the page after the document loads.

    I took PrefixFree out and bam, the page loads with no styling whatsoever.

    So, the position is off because slider.js is actually calculating it before the styles are loaded through PrefixFree.

    I need someone else to set the correct MIME type on the server for me, so I can't confirm this 100%, but I'm certain that's what the problem is.

    UPDATE: It's an issue specifically with S3 and Transmit on OS X. In Transmit preferences, set a custom upload header for CSS (content-type: text/css) and the problem is solved!