I am currently developing a mobile site, however, I've met some problems with Font Awesome. Firstly, there's inconsistent rendering of the fonts with Chrome. Sometimes, randomly, the fonts will appear as blank squares, but when I mouse over them, the original icon will display again. Also, when using IPad version of the safari mobile, the fonts appear as blank squares instead of proper fonts. I tried using other mobile browsers like android's and iphone's, but I cannot reproduce the same problem as with the IPad's. Anyone meet with this same problem and have a solution? Please help! I looked through the all the similar questions but it doesn't solve the problem I'm facing... I'm using Font Awesome 4.0.3 by the way...
It's currently an open bug in Chrome. See here, here and here.
As far as I know, this is some problem caused in the new chrome for all fonts and not just font-awesome. For me, not just the icon fonts appears so, event the text font (proxima nova) appears all broken after some time but gets corrected as soon as I hover over it or select the text. I previously noticed this problem in the beta build of the chrome and have been facing this problem in the stable build ever since chrome was updated (3 days ago). Maybe look out for a fix from Google soon!
Related
I use -webkit-mask-image in my meteor app, like this:
...
background-color: purple;
-webkit-mask-image: url('images/user_plum.png');
...
It works fine in all browsers. It works fine in the cordova version on Android. It was working fine in iOS Cordova. Now, only in iOS, all of my icons that use this technique are invisible, even though they are still clickable and functioning.
The problem was found on two users' iPhones and I reproduced it in iOS Simulator. My iPhone worked fine. Uninstall/reinstall of the app, rebuild/restart of the server, etc., nothing changed. Until I updated my phone to iOS 11.4, and now my phone has the issue, too. If I remove that -webkit-mask-image line from the CSS, I universally get the proper background-color'ed square where the icon should be. That and other simulator testing makes it clear the invisible icons are only happening on iOS devices and simulator, and only if -webkit-mask-image is in use. Is anyone aware of any changes in iOS between 11.1 and 11.4 that would break Cordova webview's handling of -webkit-mask-image?
Okay, this problem is very real, I've done a bunch of tests, installed different flavors of inappbrowser, etc., all to no avail. But here's a workaround (thanks to #JamesMontagne for the answer and jsfiddle at Is there any way to colorize a white PNG image with CSS only? that led me to try it out):
Just use -webkit-mask-box-image instead of -webkit-mask-image.
background-color: purple;
-webkit-mask-box-image: url('images/user_plum.png');
This continues to work on all the platforms it already worked on, but also works in this iOS 11.x Cordova environment in which it -webkit-mask-image had broken.
To be clear, -webkit-mask-box-image carries the "non-standard" warning in the mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image.
But it works when -webkit-mask-image doesn't, so I'm going with it for now.
Also, fyi, user_plum.png is a transparent png with a plum-colored icon image. It doesn't matter what the color of the non-transparent part is, there's no color math being done in this masking. The icon doesn't have to be white to work (many web pages of css masking topics include discussions of white or black masks).
I solved it in iOS coding both lines for everyicon:
-webkit-mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
to the CSS icon... and for some strange reason got to be in THAT ORDER (webkit first, and mask second!)
Icomoon font shows up strange in latest Safari. It has unexpected 'holes' in the filled areas.
For example:
zoomed in icon
this should be filled with color as well
These icons look good in all other browsers. So, not sure where to dig with this problem.
UPDATE:
Also looks good on Sierra and Safari 10.1
Safari 10.1 icon
Thanks in advance.
PS/ My first StackOverflow question ever ^-^
Figured out - the issue was caused by incorrect source svg. It should contain no strokes, only fills, and fill-rule="nonzero" - to be correctly converted by icomoon app to a icon font.
I am trying to workout why my menu on my Joomla website does not work properly specifically on an iPhone 6 Plus in landscape mode. I have tested this on my computer with the same viewport and I have no issues but I have been told a few times by friends/colleagues of this issue and I am kind of struggling to workout why this is happening and how i can fix it.
If somebody could please advise on any other methods that I could try to help fix this as unfortunately I don't have an iPhone 6 Plus to actually see this issue.
The site can be viewed at http://www.leicesterbakery.co.uk
I can confirm that for me the mobile menu wasn't working on an iPhone 6 Plus either.
When I clicked on the menu icon it was like focussing on the search box.
I think I have the solution.
In your CSS file at http://www.leicesterbakery.co.uk/templates/lbakery/css/custom.css, go to line 1018 and edit the width of the .search class from 80% to something lower.
In my tests, the following worked well.
.search {
width:70%;
float:left;
margin-top:20px;
}
After making the above change the mobile menu worked for me on an iPhone.
Good luck!
I connected iPhone to mac and I enabled Web Inspector in iPhone advanced settings, able to see the page in mac safari but not able to inspect any element and its style in safari. I am not seeing the elements panel or style panel.
Could anyone help me to find those panels to debug the styles, which i applied to page elements which I am testing in iPhone. I am able to see those panels in debugging the desktop safari pages. see the screenshot
Thanks in advance for any help.
If that type of problem ever happens to you in 2021, download and use Safari Preview instead of the regular Safari 👍
I got the problem with the following config:
MacOS Big Sur 11.4
Iphone 10 iOS 14.6
Cheers!
Update July, 2021:
Yes, the other answer for using Safari Technology Preview is working for me too: https://developer.apple.com/safari/technology-preview/
Debugging was broken for me with Safari on Big Sur: Version 14.1.1 (16611.2.7.1.4)
Debugging was working for me with Safari Technology Preview on Big Sur: Release 128 (Safari 15.0)
This was incredibly frustrating for me too. It's the small sidebar icon on the far top right, with elements tab open.
Before:
After:
From web inspector select any html element. Now in device it will be highlighted with blue color. The top right corner having expand window to show style, Layers, Node tabs. Select Style and edit css. Refer link given in comment for complete details.
In Safari 11.1.2, when the 'Computed' tab is selected, you can get back up to the non-computed properties (the Style Attributes) level by clicking the arrow beside any of the computed properties. See, for example, the grey arrow next to the -webkit-border-horizontal-spacing property in my attached screenshot.
Well, This is a normal problem in Catalina and BigSur updates after Mojave. Or if you are upgrading your MacOS to the later versions. I hope we don't get in Monterey!
I recommend to download - Safari Technology Preview -
BigSur - Download
with whatever you have been using.
If you are facing it with other lower versions -
try from here
The Answer is , need to select the DOM Tree from the dropdown as in the screenshot.
I created an iOS app last year using html, css, js, jqtouch and phonegap. The app has worked well until recently. It appears that since the iOS 5 update, there is a problem with the navigation.
If you scroll down the apps "pages" and try to select any options below the original screen horizon, the navigation doesn't work. Scroll back all the way to the top of the page and the links above the screen horizon all work. If you scroll back up the page, but not all the way to the original starting position, even the links that are above the original screen horizon won't work.
I worked with Phonegap support and they suggested the problem was with jqtouch. I updated the jqtouch files in the project, and now when I try to run the app (from Xcode) in the iPhone simulator or on a test device, the navigation doesn't work at all. Before, the "links/buttons" would change color as they were supposed to but no work. Now, the "links/buttons" won't change color or navigate to the next div or page.
Could someone tell me what I may have missed in updating the jqtouch/jquery files that could cause this?
We had the same issue and e solve it updaing to the latest jquery and jqtouch version.
Hopefully this will help you.