Datepicker: changeYear + yearRange causes flash in Firefox

[dsargent]

The following config will cause a full page redraw in FireFox 3.6.3 when the datepicker gains focus and displays

$('.formdate').datepicker({

dateFormat: 'mm/dd/yy', changeMonth: true, changeYear: true, yearRange: '-99:+10'}

});

I've narrowed it down to having both changeYear and yearRange present. If I remove yearRange, no flash occurs and the animation is smooth.

[kbwood]

The flash happens when the drop-down for the years is long enough to require a scrollbar. It doesn't appear to be a full page redraw, just an area that is somehow related to the position of the input.

[amodlin]

I can confirm that this does happen. It's been vexing me for about a week. This does not happen in Chrome or IE8.

[Ronin]

I can confirm this, as well(Linux 2.6.33 Swiftfox 3.6.3)

[vosechu]

Second this confirmation: XP, FF 3.6.3. I'm using jQuery-UI 1.6 but I believe this is broken in head as well. Certainly it's broken for every drupal site (since they're all stuck at 1.6 until Drupal 7).

Steps to reproduce: Define a textfield with a datepicker on it with a yearRange > 70 or so Click in the field (hidden refresh, you can sometimes see the background in the textfield) lose focus, focus into the field again, observe flashing background as the frame redraws.

Alt steps: Same as above but just click on the label for the field and it will refresh repeatedly.

Sidenote: If there's data in the textfield it won't flash. Selecting a date will stop the redraw.

[InAme]

I made lot of exemples and I notice:

(in this exemples, replace * by the date you want)

changeYear: true, yearRange: ' * : 1985 '            -> work
changeYear: true, yearRange: ' * : 1986 (or more)'   -> flashing 
changeYear: true, yearRange: ' 1967 : * '            -> work
changeYear: true, yea rRange:' 1966 (or less): * '   -> flashing

[InAme]

Hum, I don't understand this bug. Today it's not the same values which provoke the flashes. There is a factor that I can't find... It's a complex bug

[vosechu]

@InAnne it may be trickier than I'm giving it credit for but at least one case is when the select box is longer than the height of the browser window. Probably you could make it a +-5 year box and make your window really, really small and see the flash. Unfortunately, this may end up getting closed because it's a FireFox issue. I would try to patch but hacking FF is not in my skillset. We may need to migrate this onto Mozilla's bugtracker.

[imefisto]

Hi people. I've investigating this bug and this is what I found:

First, this is my code:

$("#fecha_nacimiento").datepicker({ 
  dateFormat: 'dd-mm-yy', 
  changeYear: true, 
  yearRange: "1920:2010",
  dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Setiembre','Octubre','Noviembre','Diciembre']
});

When I select a year from 1920 to 1936 (the last year without moving the scroll) it works well. But if I select 1937, I get the flashes. So I think it is caused by an updating of the scroll position in FF

[1730wang]

I have encountered the same issue. There's a Flash object below the date text box. When click the date text box above, the date picker pops up(it covers a part of the Flash) and the Flash object reloads(like being refreshed).

I'm using Win32 FF 3.6.8.

Example:

<script type="text/javascript"> $(document).ready(function(){

$('#dateFrom').datepicker({beforeShowDay: $.datepicker.noWeekends, dateFormat: 'yy-mm-dd'}); $('#dateTo').datepicker({beforeShowDay: $.datepicker.noWeekends, dateFormat: 'yy-mm-dd'});

}); </script> <label>From: <input id="dateFrom" type="text" name="dateFrom" /></label> <label>to: <input id="dateTo" type="text" name="dateTo" /></label> <embed id="Chart" width="100%" height="70%" src="chart.swf" type="application/x-shockwave-flash" quality="high" flashvars="preloader_color=#999999" wmode="opaque"></embed>

[1730wang]

Actually, I just upgraded my jQuery and its ui components to the latest version. The problem has gone away! Everything works fine now.

[scott.gonzalez]

Closing based on 1730wang's comment.

[k.robinson]

I upgraded to the latest JQuery and jquery ui and I still see this problem in firefox 3.6.8 I do not, however, see the flickering in Firefox 4.0b4.

I also notice flickering when I type characters in the input field, or when the widget is automatically shown for the first time. If I remove the yearRange option, the flashing stops. I only see the calendar's color and widget flash at me.

Includes:

~/script/jquery-1.4.2.min.js

~/script/jquery-ui-1.8.4.custom.min.js

    $('#someelement').datepicker({
                "changeYear": true, 
                "changeMonth": true,
                "minDate": "-100y",
                "maxDate": "-10y",
                "yearRange": '-100:-10', 
                "showButtonPanel": true,
                "constrainInput": true,
                "dateFormat": 'mm/dd/yy',
                "defaultDate": '+0'
            });

[AccessDenied]

I am confirming that this is still an issue. FF 3.6.8

[israelrios]

Patch to DatePicker 1.8.5

[israelrios]

I have attached a patch to fix this issue. It's a bit tricky. This is a issue with Firefox and Select boxes in my opnion. Firefox doesn't seem to handle hidden select boxes very well, specially large ones. The fixed code renders the select box after the calendar have been showed. But this is transparent to the user as a dummy select will be rendered while the full one is comming.

[mayoulti]

Replying to israelrios:

I have attached a patch to fix this issue. It's a bit tricky. This is a issue with Firefox and Select boxes in my opnion. Firefox doesn't seem to handle hidden select boxes very well, specially large ones. The fixed code renders the select box after the calendar have been showed. But this is transparent to the user as a dummy select will be rendered while the full one is comming.

I confirm, this solution (included in attachment) corrects the problem, tested under ie6+ FF3.6.10

[fetchak]

Still flickering here, FF 3.6.9pre/linux. Seems ok in Chrome.

[michael.heuberger]

Hello guys

This flash bug is getting nasty. Wondering if you can ship israelrios' patch for now?

On all my websites the clients tell me the datepicker looks ugly with this flash bug. Can you also increase the priority and correct the milestone to 1.9?

Thanks!

Michael

[scott.gonzalez]

Fixed in  7832fd8.

[anthroprose]

This is still an issue with: jQuery v1.5.2 jQuery UI v1.8.11

Firefox v4 Chrome v10.0.648.205

[scott.gonzalez]

I don't see any flashing with  http://jsbin.com/ohije3/edit

[davidmintz]

I am a somewhat naive user so bear with me.

I am running jquery-ui 1.8.14 with jquery 1.5.1, and Firefox 3.6.18 with Ubuntu 10.04. israelrios' patch does appear to be in this query-ui as I grepped the source and saw for myself (though honestly I haven't checked the minified version, but there'd be no reason to assume it's different).

And I am still getting the nasty flash when my year range is from about 1920 to 2011. Therefore I would respectfully suggest the ticket be re-opened. I agree that it's FF's problem -- I have tried my datepicker code in Opera and it works fine, no flash -- but the jQuery way as I understand it is to smooth out browser idiosyncrasies so that we don't have to worry about them.

[davidmintz]

Replying to scott.gonzalez:

I don't see any flashing with  http://jsbin.com/ohije3/edit

I tried it, too, and saw no flash. So I tried downgrading to the versions in this example in my own code, and still got the nasty flash.

My flashing problem arises in a tabbed form with a fair number of event handlers doing various things. Could it have something to do with how heavy and busy the document is?

[scott.gonzalez]

Perhaps, but that doesn't sound like something we can do anything about.

[mavis0710]

This is still an issue in Firefox 3.6 and JQuery UI 1.8.14 Firefox does not handle well scrolling in a hidden dropdown. I think this can be solved by not selecting the year in the dropdown if the datepicker is not showing. The year can be initially selected after the picker shows on _showDatePicker instead.