Bug 38079 – -webkit-box-reflect and -webkit-box-shadow bug with jQuery focus()

• Component: Layout and Rendering
• Status: UNCONFIRMED

[Ian Alexander Wood]

Created attachment 54215 [details]
Here is the display error

I've found a rather bizarre bug, it's not particularly serious but I thought I'd report it anyway. Hopefully this is the right place!

If I style a html container of some kind <div> <ul> etc with both a -webkit-box-reflect and -webkit-box-shadow everything is hunky dory.
So for example:

  -webkit-box-reflect: below 3px -webkit-gradient(linear, 0% 45%, 0% 100%, from(transparent), to(rgba(255,255,255,0.3)));
  -webkit-box-shadow: 2px 2px 2px #666;

But....

If I use jQuery to select and focus on a text input field, using say something like:

$(document).ready(function(){
  $('input[type="text"]:first').focus();
});

The html containers appearance will have malfunctioned. Specifically the reflection effect will now have the box shadow applied to it in addition to the container having the drop shadow effect, which looks a bit unsightly. Not the worlds biggest problem, and no functionality is hindered so it's purely aesthetic. I've attached some pics to show the rendering with and without an input tag on the page.

I've tested with: 

Chrome (5.0.342.9) on Mac (Intel)
WebKit nightly build Version 4.0.5 (6531.22.7, r58136) on Mac (Intel)
Safari Version 4.0.5 (6531.22.7) on Mac (Intel)
Chrome 4.1.249.1045 (42898) on PC
Safari 4.0.4 (531.21.10) on PC

they all display the same behaviour.

[Alexey Proskuryakov]

Would it be possible for you to attach a full test case reproducing the problem?

[Ian Alexander Wood]

I can format the information any way you like, if you let me know what you need (that I haven't already provided) I'll upload it.

I've also created a little live page so you can see the problem in the wild so to speak.

The address is http://webkit-bug.thoughtplant.com
If you go to it right away and it doesn't come up it's probably because I have just changed the dns so might need to give it a few hours for replication.

Anyway, once you are on the page just click about a bit, submit the form etc and you will see the bug I am talking about. Still manifests in the latest versions of Chrome and Safari (on Mac and PC) but latest nightly build of Webkit does not seem to recognise the focus command from jQuery at all so the first input box does not have focus and the menu displays as normal. A different kind of fail!

If you need anything else just let me know.

[Simon Fraser (smfr)]

We need a small HTML/CSS file that reproduces the bug. When you have it, please attach it to this bug.