Admin Bar loses background when scrolled over a broken image

[xiosen]

I am only able to produce this in Google Chrome latest version (8.0.5522.224)

The background image does not show up when the scroll bar is over top of a broken image.

[xiosen]

Screenshot of bug

[ocean90]

Looks nice. :-)

Which theme is it?

[xiosen]

Custom theme. Reduplicated on twentyten theme.

Rename or delete wp-content\themes\twentyten\images\headers\path.jpg. Then scroll over it in chrome. The same thing happens.

[ocean90]

I could reproduce it with 8.0.5522.224 and current beta on Windows too, not on Mac with 8.0.552.231. It works with Chrome Dev version on both.
I can reproduce it on all current Windows versions.

I will investigate a little bit, but I think the bug here is the broken image.

[ocean90]

It doesn't exists in Chrome 10.0.628.0, only in <= 10.0.612.

[koopersmith]

This seems to be an issue where Chrome stops rendering the CSS3 gradient when it overlaps the background image. I have no idea why.

Currently, we declare the admin bar's background attribute multiple times, which causes Chrome to render a transparent background when the gradient disappears. However, if we declare the background-color and background-image attributes separately, then Chrome has some color to fall back on, making the change almost unnoticeable.

(Also note that based on ocean90's tests, the issue does not occur in the current dev version of Chrome).

[ocean90]

Chrome wants some overflow: hidden. #main has it, because of this, broken images in posts aren't affected by the problem. The solution is, to give #branding some overflow: hidden too.

16142.patch does it.

(PS: I didn't remove "overflow: hidden, there are on the new place ​http://pastebin.com/Qy1YVm05)

[ocean90]

To prevent damages.

[koopersmith]

Good find.

We should test to be sure no side effects come from the following:

#branding, #wrapper, div.menu, #access .menu-header { overflow: hidden; }

While testing, we should check if this will effect child themes or how child menu items are displayed (they frequently breach the borders of their containing divs).

If only #branding is necessary, we may want to restrict it to that.

[nacin]

(In [17248]) Set a background color for the admin bar css3 gradient. props koopersmith, fixes #16142.

[ocean90]

nacin, why you use now the background-color fix, which will not fix the problem really?

[nacin]

Because the problem is too edge to address. overflow:hidden is potentially dangerous for an existing theme, particularly one with so many child themes being built on it. This also only comes into effect when an image is broken, and when you're logged in with an admin bar. The *real* fix here is to fix your image.

Not only that, but it's already fixed on Chrome dev, and is only a Chrome bug.

I appreciate the diligence in finding the root cause, but I think this is plenty.

[ocean90]

Yeah, after reading you comment the compromise is okay. I forget the background of this. To fast commented. Sry.