CODEWITHSUNDEEP
jquerycssinternet-explorer-7jquery-ui-datepicker
dambrisco
dambrisco

Reputation: 865

IE 7 display bug and jQuery Datepicker

I've run into an issue I've never seen before with the browser we all know and love. On this page - http://weresayingido.com/register - the labels and help text don't display normally in IE. However, flashing the Datepicker quickly using the following code causes all the text to render normally.

// IE detection hackery
if ('\v' == 'v') {
  // Flash the Datepicker UI
  $('input[name="date"]').focus();
  $('input[name="date"]').blur();
  setTimeout("$('body').mousedown()", 1);
}

(Yes, the setTimeout is necessary, otherwise the Datepicker block just stays there. No, I don't know why that is, but I would love to know.)

Given that this is by all means a rather hacky hack, I'm wondering why this happens and if it's possible to replicate without using this trickery, particularly using just CSS/HTML. Anyone happen to know the answers to these?

tl;dr: Something jQuery UI Datepicker is doing is forcing text to render visibly in IE 7 that otherwise doesn't. Can I fix this with just CSS/HTML?

Relevant links:

Upvotes: 0

Views: 543

Answers (1)

Seabass
Seabass

Reputation: 1973

IE7 doesn't like visibility, and doesn't consider body a real element.

Keep your page visible (which is also better for the unfortunate non-JavaScript users you may have). If you absolutely must, use body {display: none;} in your style.css, and make it visibly via $('body').show() in your script.js. Stay away from visibility.

Cheers.

Upvotes: 1

Related Questions