Bug 40597 – REGRESSION: input['type=radio'].focus() not redrawing background before drawing new frames

• Component: Forms
• Status: NEW

[Brenton]

The linked page uses MooTools to tween both the instructions bar and the page scroll to the next focused input.  When the instructions bar tweens without causing a corresponding scroll, the glowing widget is being drawn incorrectly.  (See screenshot).

WebKit is tweening the glowing ring on the focused widget from alpha=0 to alpha=1.  The old frames are not being erased before new ones are being drawn.  So, instead of getting the 20% of the glow on the third frame, you're getting 20% + 10% + 0%.  As a result, the entire radius of the glow is at full opacity when the tween finishes.

[Brenton]

Created attachment 58715 [details]
Screenshot of bug at end of tween

[Alexey Proskuryakov]

I cannot reproduce this with a local build of r60936 running in Safari 4. What browser/revision are you seeing this with?

What are the exact steps to reproduce? Here is what I tried:
1. Open http://beta.insightdining.com/surveys/barneys_beanery/
2. Click already highlighted date ("14", as of today)
3. Click Burbank (also tried a few other radio buttons)

[Brenton]

I've got 61103 inside of Safari 5.  If you choose a date in the date picker (select one on or before today), you'll see the instructions bar scroll to the next question.  Notice the thick blue stroke on the focused widget.

Watch the 1st answer in the 3rd question as you select an answer for the second one - the instructions bar will slide down and the focus glow will draw over itself repeatedly until you get that thick blue stroke.

If you change apps or the page scrolls, the widget redraws and everything is OK.  The bug is that the page does not redraw between frames on WebKit's focus fade-in transition.

[Alexey Proskuryakov]

I can reproduce this with shipping Safari 5 on Mac OS X 10.6.

This looks very much like bug 10049, with the only difference being that I can't reproduce this one with Safari 4 on Leopard.