Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.
Sign up to join this community
I have a WordPress which is based on the Genesis Framework and uses CloudFlare Flex SSL. The problem occurs in iOS Safari and Firefox mainly, the site gets loaded but without styles and everything else, I believe this is a Mixed Content issue.
Normally the site should look like this:
Loading without resources:
Firebug:
Newer versions of Firefox and Safari block resources such as CSS files when they detect mixed content, what this means is that you have essential resources such as CSS and JS files being blocked by the browser, why? because your site is not 'secure as much as it could be', you have some resources loading under HTTPS and some HTTP.
To resolve the issue is rather simple, make sure your files are being loaded from SSL. A simple fix would be to use //www.example.com/style.css and leave out both HTTPS/HTTP. The browser will then fetch the resources from whatever the visitor is visiting from.
In the event that you are using a WordPress plugin to rewrite the URL paths of HTTP to HTTPS, then I recommend that you remove the plugin and edit the template files manually, not only is it more reliable, its more secure (not having to do regular updates) and your save WP processing time.
