7

I have a simple website which works and renders just fine in Experience Manager (using Chrome v30), however when I switch Device (for example to check it with iPad) the page is loaded without any CSS. I have examined the HTML source, and I can see that all requests for CSS/JS are rerouted through a proxy, something like:

http://cmsserver/WebUI/Editors/DevicePreview/Proxy/DeviceEmulatorProxy.aspx?
      userAgent=Mozilla%2F5.0%20%28iPad%3B%20CPU%20OS%206_0%20like%20Mac%20OS%20X
      %29%20AppleWebKit%2F536.26%20%28KHTML%2C%20like%20Gecko%29%20Version%2F6.0%20Mobile
      %2F10A403%20Safari%2F8536.25&url=http%3a%2f%2mysite%2fcss%2fstyle.css

Pasting this URL into the browser results in the correct CSS file being loaded, however there is never an HTTP request made for this resource from my browser, despite it being there in the HTML source. I have some JS files which load just fine through the proxy.

This seems like a bit of a weird one, has anyone else encountered it before and if so, managed to sort it out?

Improve this question
4
  • Did you already clear your browser cache? I can think of two reasons why it wouldn't be requested, off the top of my head: 1) The browser already has the file cached and 2) it's blocked due to being a cross-site request.
    – Peter Kjaer
    Commented Nov 19, 2013 at 10:04
  • I dont see anything in the network tab in the chrome development toolbar, you usually see requests there, even if they are cached or blocked. Clearing the cache didnt help :o(
    – Will Price
    Commented Nov 19, 2013 at 12:01
  • 1
    Can you show the exact HTML fragment of how the CSS is included in the HTML? Maybe that gives a hint as to why Mobile Safari doesn't load the resource.
    – Frank van Puffelen
    Commented Nov 19, 2013 at 12:19
  • Thanks Frank - you made me look more carefully and I noticed the noscript tag - see answer below
    – Will Price
    Commented Nov 19, 2013 at 14:04

2 Answers 2

Reset to default
6

The problem was with the workings of the HTML design. "Standard" CSS links are enclosed in a <noscript> tag, and then for clients with JS enabled, the CSS is dynamically loaded using Javascript to enable the design to be responsive to different devices. This dynamic loading of CSS via JS was somehow not being triggered (I havent quite got to the bottom of why) for device preview, so there was no CSS (the noscript stuff was ignored). Thanks to Frank, whose comment got me to look again at the rendered HTML and notice the noscript tags!

I'm glad we have started using XPM on the project straight away, as it really helps to have an early understanding of potential issues with dynamically loaded elements in the page when using the device preview proxy, rather than trying to get it all working at the end after all the HTML design code is set in stone.

Improve this answer
4

Go to <Browser> / Preferences - Extensions. Check for any third party add ons and ensure they are not creating problem.

Make sure all the security settings are correctly been configured in your browser.

If possible, also try with the some other browser.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.