Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#5493 closed bug (fixed)

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)

jquery-ui.datepicker.patch (4.4 KB) - added by israelrios 13 years ago.
Patch to DatePicker 1.8.5

Download all attachments as: .zip

Change History (28)

comment:1 Changed 13 years ago by 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.

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by Ronin

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

comment:4 Changed 13 years ago by 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.

comment:5 Changed 13 years ago by 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

comment:6 in reply to:  5 Changed 13 years ago by InAme

comment:7 Changed 13 years ago by 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

comment:8 Changed 13 years ago by 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.

comment:9 Changed 13 years ago by 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

comment:10 Changed 13 years ago by 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>

comment:11 Changed 13 years ago by 1730wang

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

comment:12 Changed 13 years ago by Scott González

Milestone: 1.8.4
Resolution: fixed
Status: newclosed

Closing based on 1730wang's comment.

comment:13 Changed 13 years ago by k.robinson

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

comment:14 Changed 13 years ago by AccessDenied

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

Changed 13 years ago by israelrios

Attachment: jquery-ui.datepicker.patch added

Patch to DatePicker 1.8.5

comment:15 Changed 13 years ago by 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.

comment:16 in reply to:  15 Changed 13 years ago by 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

comment:17 Changed 12 years ago by fetchak

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

comment:18 Changed 12 years ago by 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

comment:19 Changed 12 years ago by Scott González

Milestone: 1.8.41.9
Priority: minormajor

comment:20 Changed 12 years ago by Scott González

Resolution: fixed
Status: reopenedclosed

Fixed in 7832fd8.

comment:21 Changed 12 years ago by Scott González

Milestone: 1.91.8.7

comment:22 Changed 12 years ago by anthroprose

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

Firefox v4 Chrome v10.0.648.205

comment:23 Changed 12 years ago by Scott González

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

comment:24 Changed 12 years ago by 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.

comment:25 in reply to:  23 Changed 12 years ago by 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?

comment:26 Changed 12 years ago by Scott González

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

comment:27 Changed 12 years ago by 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.

Note: See TracTickets for help on using tickets.