WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 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:

Description

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

Download all attachments as: .zip

Change History (15)

xiosen3 years ago

Screenshot of bug

comment:1 ocean903 years ago

  • Component changed from General to Administration

Looks nice. :-)

Which theme is it?

comment:2 xiosen3 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.

comment:3 ocean903 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 will investigate a little bit, but I think the bug here is the broken image.

Version 0, edited 3 years ago by ocean90 (next)

comment:4 ocean903 years ago

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

koopersmith3 years ago

comment:5 koopersmith3 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).

ocean903 years ago

comment:6 ocean903 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 3 years ago by ocean90 (previous) (diff)

ocean903 years ago

To prevent damages.

comment:7 koopersmith3 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.

comment:8 nacin3 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.

comment:9 ocean903 years ago

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

comment:10 nacin3 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.

comment:11 ocean903 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.