For some reason on Safari 5.1.5 Google Maps is blurring some of my images. Take http://catpr.com/craig-chapman/ for example - when it loads the chandelier renders crisply for a moment, and then blurs out.
Removing
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"> </script>
from my code stops this happening. It only seems to affect Safari - this doesn't happen in Firefox or Chrome. I haven't tested any older versions of Safari, so it may be a bug? I've also tried clearing my cache, restarting my computer + updating Safari, no change.
Any ideas?
Thanks
This issue is now occurring for me with the difference between the 3.8 and 3.9 API on Chrome (23 beta). If I specify the 3.9 API, it shows the maps correctly for a split second and then makes everything blurry. If I specify the 3.8 API it works as it should.
You can see the problem here:
The problem is on http://melbourne.origami.org.au ; I've currently set the 3.8 API as a workaround, but when v10 is eventually released, it's going to likely force 3.9 to be the lowest available API.
From my own poking about, 3.9 and 3.10 seem to invoke Chrome (and by extension Safari I would imagine) to render everything with GL compositing as it adds -webkit-transform: translateZ(0); to all map elements. This appears to be the cause of things looking hideous.
I also had this problem, with the map itself and fonts on the page. After a long time trying to fix this, this are my conclusions:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.5&sensor=false"></script>
The first one (same as yours) gives me blurry maps. If I comment it out and force the version 3.5 the maps are crisply and happy!
I also had problems with Google Maps API changing anti-aliasing in my website fonts. I managed to fix this on my main style.css:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
}
I hope this helps you or someone.
Note: I'm using the twitter bootstrap framework.
I am unable to reproduce the bug in Safari. However, two possible workarounds:
Load the script asynchronously. Check out the basic Getting Started page of the maps api and find the section Asynchronously Loading the API: http://goo.gl/m9OwJ
Try using a Google Static Maps image instead, which won't load the JavaScript just an image of the map. http://goo.gl/wY8lF. I suggest that because you appear to not be using the dynamic features of the Google Maps API.
Related
I just added Helmet to my Node/Express/EJS project and have been configuring my CSP to enable inline scripts, styles and some external sources. I have it working fine on my Windows laptop in Opera, Chrome & Edge and now I'm connecting on iOS Safari mobile and it appears that no styles are being applied. I am successfully getting Bootstrap (JS for sure, I think the CSS too although it's not 100% clear and I have no console on mobile) but my own stylesheets and scripts are not being loaded correctly.
Here's my code:
app.use(
helmet({
contentSecurityPolicy: {
directives: {
scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "*.googleapis.com", "*.jsdelivr.net", "*.jquery.com"],
styleSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "*.googleapis.com", "*.jsdelivr.net", "*.jquery.com"],
baseUri: ["'self'"],
fontSrc: ["'self'", "https://fonts.gstatic.com"]
}
}
})
)
I also notice that whenever I visit a link on my site on iOS Safari it automatically forces HTTPS when I'm only using HTTP on a localhost server. I have a feeling that this may be the cause of the problem - my stylesheets are referenced as
<link rel="stylesheet" href="/style.css" />
I think Safari may be trying to find it at https://(laptop-private-ip):3000/style.css when it really should be searching http://(laptop-private-ip):3000/style.css. Is it possible that it's trying the HTTPS link which is why I can't retrieve my own styles, but can access Bootstrap etc?
And what should I do about it? Any help massively appreciated - I've wasted hours on this.
Issue fixed. I am not 100% confident which was the problem due to cache seemingly playing a part but I believe it was one of the following.
Upgrade-Insecure-Requests
HSTS
I've recently noticed that links wrapped around Fontello icons are impossible to click on Safari 5.1.7 (or should I say "latest" Win realese"). I really don't know what could cause the issue (other browser are ok). I was trying to mess with web-inspector and unclik every custom style that could affect Fontello.
Is somebody aware of any Fontello/Safari incompatibilities?
Took me long enough to realize that somehow Google Fonts are causing some sort of issue when set on a parent of "a" containig fontello icon.
For now there is one solution that I've found - "a" has to have extra
font-family: "fontello"
See my fiddle - http://jsfiddle.net/Nippon/Qu6W5/
Is there other way around it?
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
I saw some of the sections related to IE issues in our stackoverflow website but still my question awaits.
In my local server I am running an application which is loading JS and CSS files perfectly and working fine in IE7+ and Firefox. The problem is with IE6.
If running in IE6, able to load small amount of data but not if large data.
Able to find that the complete problem causes with CSS but don't know where I am going wrong in CSS.
I tested my application with w3c validator, it shows some minor errors which can be ignored and everything looks good.
Even using IE Fixes CSS.
Could any one please provide me some ideas, like is there any css debug for IE6.
Thanks in advance...
The Internet explorer developer toolbar may go somewhere to help you. It's extremely useful, although not as good as other browser alternatives. It can be installed on IE6. To access it once installed it's in the "convenient" place of view-->toolbars
Are you are generating a <style> element for every data row? This is common (although I don't like it) when you don't have access to the <head> element or cannot concatenate rules into a single <style> element.
If so, do you have more than 31 <style> elements? IE has a limit on the number of stylesheets, so you might be seeing that problem.
There are a lot of blog posts (and SO question) on this. Here are some of the better ones I could find:
Does IE 8 have a limit on number of stylesheets per page?, Stylesheets Not Loading? 31 Reasons to Hate Internet Explorer and Internet Explorer CSS limits.
I suggest FirebugLite (for IE6), and installing Fiddler.
I'm using google chrome 5.0.307.9 beta under ubuntu 9.10 and it seems not properly render css opacity.
Using "opacity: 0.5;" under both windows chrome or windows/linux firefox make my element half transparent, but this attribute seems ignored on linux chrome. This was working on previous versions.
Any ideas about what's going on ?
For sure this is a bug in google chrome itself. using opacity: 0.5 is totally valid CSS markup, and it will work on the windows [and mac?] versions of chrome.
For now, all you can do is... try using a different browser [firefox/safari/konqueror], or ignore that your div isn't partially transparent until the fix comes.
I know that isn't really a solution, but I don't think there is much that you can do =/
Hope that helps.
This was a bug in the build, I noticed problems in a VM a week ago with this, update your chrome to resolve, current release is 5.0.322.2 Fixed it on the VM here at least, hopefully the same for you.