Skip to main content

Search and Top Navigation

#5493 closed bug (fixed)

Opened April 08, 2010 07:05PM UTC

Closed November 05, 2010 02:26PM UTC

Last modified August 15, 2011 03:48PM UTC

Datepicker: changeYear + yearRange causes flash in Firefox

Reported by: dsargent Owned by:
Priority: major Milestone: 1.8.7
Component: ui.datepicker Version: 1.8
Keywords: datepicker, Firefox, flash, refresh Cc:
Blocked by: Blocking:
Description

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.

Attachments (1)
Change History (27)

Changed April 19, 2010 06:52AM UTC by kbwood comment:1

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.

Changed April 20, 2010 08:31PM UTC by amodlin comment:2

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

Changed April 23, 2010 02:28PM UTC by Ronin comment:3

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

Changed June 01, 2010 05:16PM UTC by vosechu comment:4

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.

Changed June 16, 2010 03:03PM UTC by InAme comment:5

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

Changed June 17, 2010 07:53AM UTC by InAme comment:6

Changed June 17, 2010 07:57AM UTC by InAme comment:7

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

Changed June 17, 2010 11:40PM UTC by vosechu comment:8

@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.

Changed August 02, 2010 02:08AM UTC by imefisto comment:9

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

Changed August 17, 2010 02:49PM UTC by 1730wang comment:10

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>

Changed August 17, 2010 03:14PM UTC by 1730wang comment:11

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

Changed August 17, 2010 03:36PM UTC by scottgonzalez comment:12

milestone: → 1.8.4
resolution: → fixed
status: newclosed

Closing based on 1730wang's comment.

Changed August 24, 2010 10:51PM UTC by k.robinson comment:13

resolution: fixed
status: closedreopened

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'
            });

Changed August 27, 2010 09:47PM UTC by AccessDenied comment:14

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

Changed September 20, 2010 02:25PM UTC by israelrios comment:15

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.

Changed September 25, 2010 10:17AM UTC by mayoulti comment:16

Replying to [comment:15 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

Changed October 19, 2010 12:02AM UTC by fetchak comment:17

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

Changed October 24, 2010 02:47AM UTC by michael.heuberger comment:18

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

Changed October 24, 2010 02:58AM UTC by scottgonzalez comment:19

milestone: 1.8.41.9
priority: minormajor

Changed November 05, 2010 02:26PM UTC by scottgonzalez comment:20

resolution: → fixed
status: reopenedclosed

Fixed in 7832fd8.

Changed December 08, 2010 06:33PM UTC by scottgonzalez comment:21

milestone: 1.91.8.7

Changed April 18, 2011 11:29PM UTC by anthroprose comment:22

This is still an issue with:

jQuery v1.5.2

jQuery UI v1.8.11

Firefox v4

Chrome v10.0.648.205

Changed May 09, 2011 01:07PM UTC by scottgonzalez comment:23

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

Changed July 07, 2011 04:19PM UTC by davidmintz comment:24

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.

Changed July 07, 2011 06:46PM UTC by davidmintz comment:25

Replying to [comment:23 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?

Changed July 07, 2011 06:55PM UTC by scottgonzalez comment:26

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

Changed August 15, 2011 03:48PM UTC by mavis0710 comment:27

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.