CSS3 PIE Forums
http://css3pie.com/forum/

Background is not visible until hovering on element in IE7
http://css3pie.com/forum/viewtopic.php?f=6&t=2062
Page 1 of 1

Author:  dpolivy [ Thu May 16, 2013 12:53 pm ]
Post subject:  Background is not visible until hovering on element in IE7

I am using PIE 2.0 beta, primarily to get border-radius styles working in IE7 and IE8. I have position: relative specified on my button elements as recommended by the z-index known issue FAQ.

In IE8, everything seems to work just fine.

In IE7 (and IE8 in Compatibility mode), it seems that sometimes (often) the background is 'hidden' until you hover on the element, and then it pops into view (and sticks around). I use both <a> and <input> elements for my buttons, and the issue seems to affect both.

One example is at https://www.cellartracker.com/adduser.asp. In the bottom right, there should be a big red button that says "Submit and Create My Account". In IE7, you don't see the button or the text (since without the background, you have white text on a white page). If you hover the mouse over the space where the button should be, the background pops into view.

I'm sure it's something simple I'm missing -- any ideas?

Thanks,
Dan

Author:  dpolivy [ Thu Jun 20, 2013 10:45 am ]
Post subject:  Re: Background is not visible until hovering on element in I

Jason, any thoughts on this one?

Author:  jason [ Sat Jun 22, 2013 11:36 am ]
Post subject:  Re: Background is not visible until hovering on element in I

I don't have time to look into this at the moment, but perhaps -pie-poll would help?

Author:  setsailmedia [ Fri Jul 26, 2013 3:40 pm ]
Post subject:  Re: Background is not visible until hovering on element in I

Hi, I was able to resolve the same problem you describe in my own site. For me, the problem was with Typekit rendering web fonts and that conflicting with PIE. To fix, you will need to use jQuery to detect the browser, and in IE8 and older, wait until the DOM is loaded to fire Typekit (or your web font rendering engine).

Code:
<script type="text/javascript" src="http://use.typekit.com/TYPEKITID.js"></script>
<script type="text/javascript">if ($.browser.msie && $.browser.version==8) { $(window).load(function() { try{Typekit.load();}catch(e){}}); } else { try{Typekit.load();}catch(e){} }</script>


Looking at your source, you are using web fonts but does not appear to be Typekit. Either way, wrap the JavaScript with the browser detection:

Code:
<script type="text/javascript">if ($.browser.msie && $.browser.version==8) { $(window).load(function() { /**YOUR JS HERE**/ }); } else { /**YOUR JS HERE AGAIN**/ }</script>


If you happen to be using the latest version of jQuery, they've done away with $.browser. You can get it back with this jQuery function:

Code:
(function( jQuery, window, undefined ) {
"use strict";
 
var matched, browser;
 
jQuery.uaMatch = function( ua ) {
ua = ua.toLowerCase();
 
var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
 
return {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
};
 
matched = jQuery.uaMatch( navigator.userAgent );
browser = {};
 
if ( matched.browser ) {
browser[ matched.browser ] = true;
browser.version = matched.version;
}
 
// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
browser.webkit = true;
} else if ( browser.webkit ) {
browser.safari = true;
}
 
jQuery.browser = browser;
 
})( jQuery, window );


Hope this is helpful :D

Author:  setsailmedia [ Fri Jul 26, 2013 3:42 pm ]
Post subject:  Re: Background is not visible until hovering on element in I

Just another note that I *did* add pie-poll as Jason suggested, not sure whether this had any helpful impact - the true fix was firing Typekit after the DOM loaded, but you may want to experiment with adding this CSS declaration to the affected elements:

Code:
   -pie-poll:true;

Author:  dpolivy [ Tue Aug 13, 2013 10:52 am ]
Post subject:  Re: Background is not visible until hovering on element in I

Thanks for the feedback! Just to test, I tried fully removing my webfont script from the page, but I didn't notice any difference in the issue here. I'm not using the web fonts on the buttons in question -- perhaps that's the difference between our scenarios?

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/