Ticket #5493 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

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

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

Change History

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

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

comment:4 Changed 4 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 follow-up: ↓ 6 Changed 4 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 4 years ago by InAme

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

  • Status changed from new to closed
  • Resolution set to fixed
  • Milestone set to 1.8.4

Closing based on 1730wang's comment.

comment:13 Changed 4 years ago by k.robinson

  • Status changed from closed to reopened
  • Resolution fixed deleted

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 4 years ago by AccessDenied

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

Changed 4 years ago by israelrios

Patch to DatePicker 1.8.5

comment:15 follow-up: ↓ 16 Changed 4 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 4 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 4 years ago by fetchak

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

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

  • Priority changed from minor to major
  • Milestone changed from 1.8.4 to 1.9

comment:20 Changed 4 years ago by scott.gonzalez

  • Status changed from reopened to closed
  • Resolution set to fixed

Fixed in  7832fd8.

comment:21 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.7

comment:22 Changed 4 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 follow-up: ↓ 25 Changed 3 years ago by scott.gonzalez

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

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

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

comment:27 Changed 3 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.