I'm using Google Webfont Roboto and Yanone on my Wordpress blog. I'm using WP enqueue to load the fonts:
wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,500|Yanone+Kaffeesatz:400,700', array(), null );
wp_enqueue_style( 'google-fonts' );
Now the strange behavior is as follows:
The font loads (I can see that on my dev tools). But it doesn't show.
When I hover on the Yanone font, it shows up mysteriously.
When I hover on the Roboto font, it doesn't show up. But when I right click on it, It shows up.
Also, if I open the dev tools/inspect element, the font shows up.
There's no way to show the fonts on Chrome for Android.
It works fine in all browsers except Google Chrome. (both on Windows and Android phone)
Strangely, it was working fine with Chrome too but suddenly it stopped working. (probably after Chrome updated)
I'm racking my brains apart with the issue. Nothing seems to fix it. Shame that Google can't render its own fonts properly while Firefox etc. has no problem.
Can someone please help me with a workaround? I'm stuck. :(
p.s. I'm using W3 Total Cache plugin. Just FYI.
Related
Have a most bizarre issue that just started happening two days ago for no reason. It seems to be getting worse too. I remote into my home computer routinely to develop my cordova app. Connected to my computer is a Samsung phone for testing. After compiling my app to the phone, i launch chrome inspector to see the app and do debugging, UI development, etc
I have been doing this setup for 3 months now and it all works fine. About two days ago when I compile my app chrome inspector is just showing blank - it says its loaded the project/index.html file - but everything is blank. No resources, no elements...nothing. However when I compile and deploy the app to the device, I see the "app name" in Chrome disappear and reappear after that attaches and deploys...I then click the "app name" to open it up in Inspector. So Chrome see's it deployed, but inspector is just completely blank.
I recompile, redeploy and then it works again. But more and more lately, even after recompile/redeploy its showing blank again. I have no idea whats caused this - I didn't do any updates or plugin changes....I was literally testing CSS values when all this started. And I can't seem to find any references to this issue in google searches.
Anyone seen this before?
I had the same problem after some time researching I found that:
You can't debug the release APK!
you can just use the debug APK
for more ref
The problem turned out to be using a css style on an Ionic Modal or Popover. Specifically, using border-radius:1px. If defined, the web UI portion of Chrome Inspector would black out. So to troubleshoot my app development using Chrome Inspector I would have to disable that css style until it was ready to deploy the final app.
However, since then...and within the last 2 weeks or so, it appears that Chrome has fixed this issue. If you use border-radius with an Ionic Modal or Popover, you can see the bottom corners have the radius applied, but the top corners are square. Seems to me Chrome's fix for the problem was to simply remove top border-radius for rendering in Chrome Inspector.
Can somebody tell me why when I open this website template with Chrome from Android I cannot see the background?
https://html5up.net/uploads/demos/highlights/
If I open the same link with Firefox for Android, the background shows up with no problems (everything is also fine with all browsers from the PC). I tried changing the CSS in a zillion ways, but I still got the issue. Any idea to fix it?
I have an HTML page which is displayed correctly in all devices and all browser except the stock Android browser in Xperia Z.
On this particular device running Android 4.2.2, I am using jQuery v1.7.2, and using $('div').slideUp and $('div').slideDown methods only, and it results in text distortion (it is in English, so I suppose it is not related to any specific font), the text appears as horizontal lines as they would appear for a fraction of a second while sliding up/ down.
I have tried turning the debug mode ON by about:debug in the stock browser, and the javascript console shows no error/ warning messages.
I tried changing the user agent string to iPhone, and to my surprise, the text is rendered as expected.
I have searched for similar issue, and came across Android stock browser crashing, it points to jQuery bug where slideUp/ slideDown have problems in Android stock browser (please note that jQuery and Android versions are different in the reported bug).
My questions are:
Is this a known issue?
Has anyone faced similar problem before?
Is there a workaround to resolve it?
I'd really appreciate if anyone could point me in the right direction.
Maybe there's some magic I don't know about with scrolling on Android?
I've got a website that works fine in IE7, IE8, IE9, FireFox, Chrome, AND Safari on desktop. It also works fine in Safari on iPhone.
However, one of my Android 2.3.7 friends informs me that he has Opera and the default browser on his Android. In both of those browsers, the scrollable view doesn't end at the bottom of the page. When you get to the very end where the dark grey footer ends, you can go right past it and see solid cream-colored background going on for miles of scrolling!!
I have NO IDEA what could cause this!
Can anyone throw me a bone here?
Here's the site for anyone who might have Android 2.3.7 or another version of Android to test. Like I said, happens in both default AND opera browsers.
http://wwwa1nbkclientsitecom.zippysites.com/
UPDATE: I removed the overflow-y property from the HTML style tag in the stylesheet. I had another Android 2.* user test it. Its still broken. And now my next guess is that this might be broken due to the fancy floating menu at the top. Early versions of Android only had partial support for position: fixed
I'll try disabling the position: fixed menu and get it tested again.
UPDATE 2: I got it tested. Its still broken. I'm presently installing Google's Android SDK for the Emulator functionality. It'll let me specify old versions of Android to test. If I narrow down the problem, I'll post the answer here. Until then, if anyone has an idea of what's going on, please post your idea!
It works fine for me in the latest version of Chrome on an Android 4.0.4 tablet.
However, I think the problem may lie with the other browsers' interpretation of overflow-y: scroll; on your <html> tag.
Try removing that property. You shouldn't need it on the <html> tag anyway.
It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.
In a web page running on an Android browser (on a Galaxy Nexus), is it possible to disable the feature that suggests words (in a box above the keyboard) and underlines them as you type?
I tried autocomplete="off" autocorrect="off", but it had no effect.
In experiencing the same issue I did some digging and discovered it is a bug in Chrome for Android. Those HTML 5 attributes are intended to do what you are looking for but are not properly supported in Chrome for Android(they do work for iOS). It appears to just recently have been fixed and hopefully should be released in an update soon.
https://code.google.com/p/chromium/issues/detail?id=303883&q=autocorrect&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Also feel free to Star the issue to help boost the ranking...
In a web page running on an Android browser (on a Galaxy Nexus), is it
possible to disable the feature that suggests words (in a box above
the keyboard)
No
and underlines them as you type?
No
Those are user preferences and moreover if the user bought a keyboard app, it can have its own setting to auto-complete.