CODEWITHSUNDEEP
csssafarimobile-safarimodernizr
David Nguyen
David Nguyen

Reputation: 8528

Modernizr CSS rule ignored by Safari (Mobile Safari as well)

I cannot figure out why Safari/Mobile Safari is ignoring a line of code that uses Modernizr's .generatedcontent rule to hide icons using icomoon. You can view the live site at http://importbible.com/ the icons are on the footer of the page. The browser renders perfectly on Chrome. Did some more testing, Safari 5.1.2 fails while Safari 6.0.1 works. iPad running 4.3 fails. The line in question is:

.generatedcontent .icon-gplus, .generatedcontent .icon-facebook, .generatedcontent .icon-twitter, .generatedcontent .icon-feed, .generatedcontent .icon-youtube, .generatedcontent .icon-flickr, .generatedcontent .icon-deviantart, .generatedcontent .icon-tumblr, .generatedcontent .icon-share, .generatedcontent .icon-tag, .generatedcontent .icon-home, .generatedcontent .icon-news, .generatedcontent .icon-cart, .generatedcontent .icon-cart, .generatedcontent .icon-basket, .generatedcontent .icon-mail, .generatedcontent .icon-clock, .generatedcontent .icon-forward, .generatedcontent .icon-replay, .generatedcontent .icon-chat, .generatedcontent .icon-refresh, .generatedcontent .icon-magnifier, .generatedcontent .icon-zoomin, .generatedcontent .icon-expand, .generatedcontent .icon-cog, .generatedcontent .icon-trash, .generatedcontent .icon-list, .generatedcontent .icon-grid, .generatedcontent .icon-download, .generatedcontent .icon-globe, .generatedcontent .icon-link, .generatedcontent .icon-attachment, .generatedcontent .icon-eye, .generatedcontent .icon-star_empty, .generatedcontent .icon-star_half, .generatedcontent .icon-star, .generatedcontent .icon-heart, .generatedcontent .icon-thumb, .generatedcontent .icon-cancel, .generatedcontent .icon-left, .generatedcontent .icon-right { display: none !important; }

Upvotes: 7

Views: 770

Answers (3)

gkond
gkond

Reputation: 4294

Right now Chrome shows footer social icons fine, but in Safari 5.1.7 there are no icons at all.

Another thing I've noticed is that several CSS files are applied twice (minified and plain). See line 73:

<link rel='stylesheet' type='text/css' media='screen' href="http://importbible.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/import_bible_5.3/css/bs-responsive.css,wp-content/themes/import_bible_5.3/css/rating.css,wp-content/themes/import_bible_5.3/style.css&amp;f22064" />

And lines 420-422:

<link rel='stylesheet' id='bootstrap-rs-css'  href="http://importbible.com/wp-content/themes/import_bible_5.3/css/bs-responsive.css?f22064" type='text/css' media='screen' />
<link rel='stylesheet' id='rating-css'  href="http://importbible.com/wp-content/themes/import_bible_5.3/css/rating.css?f22064" type='text/css' media='screen' />
<link rel='stylesheet' id='style-css'  href="http://importbible.com/wp-content/themes/import_bible_5.3/style.css?f22064" type='text/css' media='screen' />

Looks like Safari gets wild on this particular matter.

Upvotes: 0

Dawson
Dawson

Reputation: 7597

Throwing this out there as a debugging option, if nothing else. Have you tried using a wildcard for .icons?

[class*='icon-'] { display:none !important }

or

[class^='icon-'] { display:none !important }

EDIT: Friday your page was timing out, so I couldn't view it. Today I'm getting the following errors (Safari 5.1.2/MAC):

  1. XMLHttpRequest cannot load http://static.ak.fbcdn.net/rsrc.php/v2/yy/r/5SjacuFVbni.js. Origin http://www.facebook.com is not allowed by Access-Control-Allow-Origin. oauth
  2. Failed to load resource: the server responded with a status of 407 (Proxy Authentication Required) //This is probably on my end.

And I'm seeing 6 icons under "Connect".

I have no problem browsing to the URL in error line #1 directly (Safari or Chrome).

Upvotes: 3

Alex Roper
Alex Roper

Reputation: 511

It looks like <span class="icon-facebook">1</span> is your backup for browsers that don't support generated content. I would suggest hiding the back-up by default (thru CSS), and letting javascript show your backup icons for browsers that don't support generated content. Either by using Modernizr's "no-generatedcontent" class, or the IE7 javascript file supplied by IcoMoon.

Using Modernizr:

.icon-facebook { display: none; }
.no-generatedcontent .icon-facebook {display: inline; }

Or the lte-ie7.js file supplied by IcoMoon. Using this method you wouldn't have to use extra markup (just use <span class="icon-facebook-b"> without the backup <span class="icon-facebook">1</span>).

/* Use this script if you need to support IE 7 and IE 6. */

window.onload = function() {
    function addIcon(el, entity) {
        var html = el.innerHTML;
        el.innerHTML = '<span style="font-family: \'icomoon\'">' + entity + '</span>' + html;
    }
    var icons = {
            'icon-home' : '&#x21;',
            'icon-home-2' : '&#x22;',
            'icon-newspaper' : '&#x23;',
            'icon-pencil' : '&#x24;',
            'icon-pencil-2' : '&#x25;'
        },
        els = document.getElementsByTagName('*'),
        i, attr, html, c, el;
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        attr = el.getAttribute('data-icon');
        if (attr) {
            addIcon(el, attr);
        }
        c = el.className;
        c = c.match(/icon-[^\s'"]+/);
        if (c) {
            addIcon(el, icons[c[0]]);
        }
    }
};

Upvotes: 1

Related Questions