-ms-text-security:disc and -ms-text-security:disc; not working - browser

-ms-text-security:disc and -moz-text-security:disc is not working for IE and mozilla. Is there any other way around? I want to use it mask text field with bullets. -webkit-text-security:disc is working for chrome.

As per --webkit-text-security property is only applicable to those browsers using the WebKit as the engine.

Related

Can I use an SVG image as an button icon?

Is this possible at all? I call Image.createSVG(...) and receive an Image object without any errors. I then call Button.setIcon(). But there's no icon on the button.
You need to check Image.isSVGSupported() which currently will always return false.
Back in the day J2ME supported SVG thru one of the JSR's. No platform since has supported SVG natively with the exception of the web so this doesn't work on any of the modern platforms and we didn't bother implementing this even for the JavaScript port.
In the future we'd like to have a more efficient/portable way of supporting SVG e.g.: https://github.com/codenameone/CodenameOne/issues/1890

Fontastic.me not working on mobile

Fontastic.me is a website that let you upload svg files so you can use your icons as a font. I've used this site lots of times, but today I noticed the icons are not working on mobile anymore. They do work in the browsers on computer. I only noticed it today, it has always worked before.
You can use this link to test on mobile.
To me it seems like a bug in the Fontastic CSS generator: your page links CSS
https://fontastic.s3.amazonaws.com/8pMGtiqubDqmpbD4ER7hE3/icons.css
this contains last SVG fallback linked as
https://cdn.myfontastic.com/8pMGtiqubDqmpbD4ER7hE3/fonts/1446830181.svg#1446830181
the hash part of the URL must correspond with font ID in the SVG, but actual source contains <font id="cloud-font" horiz-adv-x="512"> instead.
So replacing #14468301 with #cloud-font in CSS or replacing #id value in SVG should fix your problem.
This applies only for case your mobile really resorts to SVG version. Only few browsers would do that (I think Android below 4.4, maybe old Safari, Blackberry, and maybe Opera Mobile).
(Besides that, your HTML contains extra HEAD tag with icon CSS link in BODY, what is not valid. I donʼt think this will make any sane browser completely ignore the link, but cannot exclude such possibility. If you have served your page as real application/xhtml+xml, browser should show the error right away.)
Greg, i had the same issue. I end up ditching Fontastic and use https://glyphter.com/ instead.
Glyphter creates your own font set by uploading each character at a time.
It worked for me and perhaps you can try this too and see if it works.

Background Cover JPG not rendering on mobile devices

I've setup two pages with the background-size:cover; with one using a .jpg and one using a .png. Both pages render fine in Chrome/Safari/Firefox on the desktop, but for some reason the .jpg version does not render on iPhone/iPad in Chrome/Safari.
PNG Version
JPG Version
I suspect it might have something to do with the compression of the .jpg which I set to the lowest (smallest file size) setting in Photoshop, but I could not find any actual info on this. Any advice is much appreciated!
EDIT:
I am already using the browser specific prefixes in my css (e.g. -webkit-,-moz,-o-).
background-size is a new CSS property and therefore isn't available everywhere yet
although in mobile devices -webkit-background-size:cover; should do the trick
For Safari versions <5.1 the css3 property background-size doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
Hence use -webkit-background-size:cover.
Reference-Safari versions using webkit

YUI2 setStyle opacity not working in IE10

I have some YUI2 code (v2.8.1) that looks like this:
YAHOO.util.Dom.setStyle('foo', 'opacity', 0.5);
and:
var t = new YAHOO.util.Anim(this._splashSlide.shutter, {opacity: {from: 1.0, to: 0}}, 1, YAHOO.util.Easing.easeBoth);
It has been working fine for a number of years and it automatically decides whether it can use style.opacity or whether (for IE) it has to use the IE style.filter to achieve opacity. For a variety of reasons, it is not worth porting this code to YUI3.
Along comes IE 10, which (in standards mode) no longer has the style.filter property and only supports the standard style.opacity property. That's all good, but the YUI2 version I'm running against doesn't know about IE 10 and is apparently still using the style.filter property which no longer works.
So, my question is whether there is an update to YUI2 that is IE10 compatible and uses the opacity property for IE versions where that property exists?
If it was just a simple style setting, I could work around it, but I have a number of YUI animations and I can't find an easy way to work around those (nor do I want to spend the time doing so).
Has Yahoo fixed this for YUI2? Anyone aware of a work-around, particularly for the animation functions that call YD.setStyle() internally?
I guess I found an answer to my own question. YUI2 v2.9.0 changes their setStyle() function to use feature detection so they now properly use style.opacity on browsers that support it and only use IE's style.filter when style.opacity is not supported.
If ever one wanted a poster child for why browser detection is bad and feature detection is good, this is a perfect example. Because YUI2 originally used browser detection, it is now broken on IE10. If they had used feature detection in the first place, the older versions of YUI2 would work on IE10 without requiring an update.
Now, to see if I can get the site where my code runs to upgrade to YUI v2.9.0. If not, I'll have to code a messy workaround.

Is there a webkit or IE equivalent of Firefox's window.mozInnerScreenY property?

The nice thing about the FF property is that it works from within a cross-domain iframe. Anything like that available for chrome/safari?
There are currently no native methods or properties to do this IIRC. Maybe give this a try?
Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)

Resources