Trying to help troubleshoot an issue with a charity's web site and it appears that the site's CSS is only partially loading when viewed on Safari. A short link to the site is http://bit.ly/1znipeN
I've used the W3C CSS validator on the child theme CSS and it validated ok, less a couple of warnings. The odd thing is that the site appeared to be working fine until today. I wonder whether it could be a temporary issue in a 3rd party resource, such as JSQuery or similar that is causing Safari not to render correctly? It works fine in Chrome for example.
Is there any way of debugging it to try and find the cause?
If you haven't done so yet clear cache in Safari and Chrome and reload to check if the error is possibly now gone or visible in multiple browsers.
If you are using versioning such as git:
Undo all changes that have been made today (and maybe also yesterday) and test again. If the site works now on Safari, take the changes back in one by one and test which one breaks the layout.
If you use a preprocessor such as Sass, compare the size of yesterday's CSS file to the current one. If it is smaller there might be an error in rendering the file.
Hope one of these helps.
Ah interesting, so these lines we added to .htaccess were the cause for the site not to render correctly in Safari, Firefox and a few others (worked fine in Chrome).
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
Related
If I start the Project with Visual Studio(2013) and choose HTTPS the first time the application starts I see the glyphicons but not if I refresh the page.
If I do the same with HTTP then I dont have this Problem.
In my web.Config I don't use Cache and I also checked the Font Folder everything seems OK.
I saw many similar question on stackoverflow like this link
or this one but nothing helped.
I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.
I was followed this article to setup bundling and minification, http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification.
I thought it was working great, until I updated some css, but I kept getting the old style. I am working in firefox, I have cleared my cache, restarted my browser, restarted IIS, and even restarted my computer, and nothing is working.
When I turn off bundling and minification
BundleTable.EnableOptimizations = false;
The new styles show up and the page looks as it should. Turn bundling and minification back on and I get the old styles again. Also, whenever I rebuild or change one of the css files, there is is a new chache busting token. So you would think that it is sending different content, but I still get the old stuff. I even added a test class to one of the css files, then downloaded the minified css file, but the test class I added is not there.
Has anyone else run into this problem?
Follow my instructions under Debugging Bundled and Minified JavaScript to figure out what you're doing wrong.
rebuild or change one of the css files, there is is a new chache busting token
Verify you are using RC and not beta. Rebuilding will not change the cache busting token, only a change will.
Don't I feel like the bonehead. Apparently I am working too many hours. I had a style.min.css file that the optimizer was using, but I was making changes to style.css. I even knew that is what the optimizer did, but I... Well no excuses. It was a brain fart.
Bootstrap is a very cool, but for some reason all icons (and icons inside buttons) are not serving up at all in IE 7 & 8.
All that is coming up is a square symbol.
I can live with non-rounded boxes in IE, but the icons are kind of a must. Any ideas?
(if it makes any difference, we're running rails as the platform with the twitter-bootstrap-rails gem.
Thanks!
Make sure you have declared the doctype in your HTML.
<!doctype html>
I assume the icons are correctly served on other web browser and you are using 2.0.4.
You can try to clear the ie cache.
Or maybe http://fortawesome.github.com/Font-Awesome/ (ie7 is supported)
There's a list of issue specific to ie on GitHub : https://github.com/twitter/bootstrap/issues?labels=ie&page=1&state=closed
But don't see any related to your problem.
If none of the answer make sense to you, post some code (jsFiddle would be ideal but since the picture is expected to be in /img it will not works without editing bootstrap.css)
I've just installed and setup sIFR on my Magento store. An example page can be seen here:
http://www.mint-creative.co.uk/shop
And you can see it loads the heading brilliantly, but still displays the alternate text-only headline. I've quadruple checked the .css files and everything's loading ok I think. Also, in IE it doesn't display at all and every .css and .js file has an error according to the error log in IE8.
Any help on this would be great as it's an urgent project!
Cheers.
This is a known issue with IE8. The best thing to do is put this in your header
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
(I had to add a space after < to get it to show up for some reason so make sure you delete that space)
It'll fix your problem.
I'd also try Cufon or Font-face over sIFR.
There's a parse error in the CSS files. Try validating them and see what comes up.