Make WordPress Core

Opened 13 years ago

Closed 13 years ago

Last modified 13 years ago

#16142 closed defect (bug) (fixed)

Admin Bar loses background when scrolled over a broken image

Reported by: xiosen's profile xiosen Owned by:
Milestone: 3.1 Priority: normal
Severity: normal Version: 3.1
Component: Administration Keywords: has-patch
Focuses: Cc:


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.

Attachments (4)

adminbar.jpg (16.8 KB) - added by xiosen 13 years ago.
Screenshot of bug
16142.diff (712 bytes) - added by koopersmith 13 years ago.
16142.patch (595 bytes) - added by ocean90 13 years ago.
16142.2.patch (409 bytes) - added by ocean90 13 years ago.
To prevent damages.

Download all attachments as: .zip

Change History (15)

13 years ago

Screenshot of bug

#1 @ocean90
13 years ago

  • Component changed from General to Administration

Looks nice. :-)

Which theme is it?

#2 @xiosen
13 years ago

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.

#3 @ocean90
13 years ago

  • Milestone changed from Awaiting Review to 3.1

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.

Last edited 13 years ago by ocean90 (previous) (diff)

#4 @ocean90
13 years ago

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

13 years ago

#5 @koopersmith
13 years ago

  • Keywords has-patch added

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).

13 years ago

#6 @ocean90
13 years ago

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

Last edited 13 years ago by ocean90 (previous) (diff)

13 years ago

To prevent damages.

#7 @koopersmith
13 years ago

Good find.

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

#branding, #wrapper,, #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.

#8 @nacin
13 years ago

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

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

#9 @ocean90
13 years ago

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

#10 @nacin
13 years ago

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.

#11 @ocean90
13 years ago

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

Note: See TracTickets for help on using tickets.