All geek questions in one place

Safari mobile does not consider CSS color attribute for HTML object ✖

A bit confusing, the color attribute is respected on the desktop version of Safari, but not on the mobile device.

I tested it on iPhone 5 (iOS version 9.2.1).

Code example (the first interval will be displayed in black on the safari mobile device):

<html> <head> <style> span { color: white; } </style> </head> <body> <span>&#10006;</span> <span>&times;</span> <span>×</span> </body> </html>

and JSFiddle link: https://jsfiddle.net/9t3v8846/

Adding! Important did nothing. Any ideas what could be causing this?

+5
source share
2 answers

If any poor people are faced with this, then the way to fix this is to add a variation selector after such an entity:

<span>&#10006;&#xFE0E;</span>

Essentially, what happens under the covers, the browser sees how to render HTML objects.

Safari on iOS prefers to use Emoji-like rendering where possible, so it ignores the CSS attribute. The selection you choose above indicates that we want to use text rendering, as a result of which Safari will now respect any color attributes applied to it.

+11
source

If you use less, try this

 @baseColor: #ffffff; body { color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1); color:@baseColor }
-1
source

Source: https://habr.com/ru/post/1244879/

More articles:


All Articles