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.
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!)
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.
The Magnifying glass shows up, but is empty (white)!
On iOS simulator, it is working fine.
Any clue ?
Thanks,
Jonathan.
Sorry for having asked, but after a LOT of research, I found this question already :
In iOS7 Text Magnifier isn't working app wide
For me, the problem was also that for historical reason, another UIWindow object was instanciated.
j.
Maybe it's due to the frames not being with the right size in the UI editor at Xcode.
Check for warnings of compilation time and see if you have problems in your storyboards or xib files.
Also, are you running iOS simulator of the same type of your device? If not, you might be missing to test it there also!
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!
I've got an MvvmCross app that was working fine until iOS 7 came out - in a UIDialogController, I have a few SimplePickerElements. In iOS7 (even in the simulator), when the screen scrolls to the element, the screen is completely blank.
I've got the source code and would be happy to play around with it but I have no idea where to start..
We fixed a similar issue for date and time pickets recently - it's to do with the transparency and default font colour of the new ios7 Pickers. I suspect this problem will be similar.
That issue was https://github.com/MvvmCross/MvvmCross/issues/458 - you can see the commit that fixed it linked there - it's a quick change to the background colour.