Geek Answers Handbook

Upgraded CSS rule ignored by Safari (Mobile Safari also)

I cannot understand why Safari / Mobile Safari ignores a line of code that uses the Modernizr .generatedcontent rule to hide icons with icomoon. You can view the site in http://importbible.com/ mode, the icons are located on the page footer. The browser displays Chrome perfectly. Several more tests happened, Safari 5.1.2 does not work while Safari 6.0.1 is running. iPad works 4.3. Corresponding line:

.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; }

+7
source share
3 answers

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

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

or

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

EDIT: On Friday, your page crashed, so I couldn’t view it. Today I get the following errors (Safari 5.1.2 / MAC):

And I see 6 icons in the "Connect" section.

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

+3
source

It seems that <span class="icon-facebook">1</span> is your backup for browsers that do not support the generated content. I would suggest hiding the default backup (via CSS) and let javascript show your backup icons for browsers that don't support generated content. Either using the Modernizr class "no-generatedcontent" or the IE7 javascript file provided by IcoMoon.

Using Modernizr:

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

Or the lte-ie7.js file provided by IcoMoon. Using this method, you will not need to use additional markup (just use <span class="icon-facebook-b"> without 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]]); } } };
+1
source

Chrome now displays social icon icons at the bottom, but there are no icons at all in Safari 5.1.7.

Another thing I noticed is that multiple CSS files are applied twice (miniature and simple). 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' />

It seems like Safari is getting wild on this.

0
source

More articles:


All Articles