0

I'm trying to use the following style to create a text-stroke using text-shadow:

.text-stroke {
text-shadow: -1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}

It doesn't work for the mobile versions of Firefox and Chrome. Is there anything I can do to make it work in mobile?

0

2 Answers 2

0

Your solution is Polyfills.

I.e, use CSS text-shadow where supported, and use a css background-image, where unsupported.

See http://modernizr.com/ for detection of support of text-shadow among others.

Tutorial on how to use Modernizr: http://www.hongkiat.com/blog/modernizr/

TLDR:

Modernizr will add a CSS class .no-textshadow to your HTML element, if it detects that the browser does not support text-shadows.

Then it's a matter of providing a fallback in your CSS along the lines of .no-textshadow .text-stroke{}

0

You can view in in Can i use website. It's show you the browser supports of CSS tags.

Chrome for Android 39 or heighter version.

Edit:

Set the blur radius to 1px or heighter.

2
  • So you provided a link to a site that doesn't mention FireFox mobile and claims that Chrome for Android should support it. How does this answer the question?
    – GolezTrol
    Dec 15, 2014 at 11:51
  • Fair enough, but still no indication as why it wouldn't work.
    – GolezTrol
    Dec 15, 2014 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.