Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#16142 closed defect (bug) (fixed)

Admin Bar loses background when scrolled over a broken image

Reported by: 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 11 years ago.
Screenshot of bug
16142.diff (712 bytes) - added by koopersmith 11 years ago.
16142.patch (595 bytes) - added by ocean90 11 years ago.
16142.2.patch (409 bytes) - added by ocean90 11 years ago.
To prevent damages.

Download all attachments as: .zip

Change History (15)

11 years ago

Screenshot of bug

#1 @ocean90
11 years ago

  • Component changed from General to Administration

Looks nice. :-)

Which theme is it?

#2 @xiosen
11 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
11 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 11 years ago by ocean90 (previous) (diff)

#4 @ocean90
11 years ago

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

11 years ago

#5 @koopersmith
11 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).

11 years ago

#6 @ocean90
11 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 http://pastebin.com/Qy1YVm05)

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

11 years ago

To prevent damages.

#7 @koopersmith
11 years ago

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.

#8 @nacin
11 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
11 years ago

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

#10 @nacin
11 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
11 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.