WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#19163 closed defect (bug) (fixed)

The admin bar background is not styled properly in Firefox

Reported by: azaozz Owned by: azaozz
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: Toolbar Keywords: has-patch commit
Focuses: Cc:

Description (last modified by azaozz)

As the title. Screenshot: FF, IE9, Chrome.


Attachments (2)

adminbar-background.jpg (26.1 KB) - added by azaozz 2 years ago.
19163.patch (1.3 KB) - added by ocean90 2 years ago.

Download all attachments as: .zip

Change History (12)

azaozz2 years ago

comment:1 azaozz2 years ago

  • Description modified (diff)

comment:2 azaozz2 years ago

  • Description modified (diff)

comment:3 duck_2 years ago

#wpadminbar {
        background-color: #464646; /* Fallback */
        background-image: -ms-linear-gradient(bottom, #464646, #373737 5px); /* IE10 */
        background-image: -moz-linear-gradient(bottom, #464646, #373737 5px); /* Firefox */
        background-image: -o-linear-gradient(bottom, #464646, #373737); /* Opera */
        background-image: -webkit-gradient(linear, left bottom, left top, from(#464646), to(#373737)); /* old Webkit */
        background-image: -webkit-linear-gradient(bottom, #373737, #464646 5px); /* new Webkit */
        background-image: linear-gradient(bottom, #464646, #373737); /* proposed W3C Markup */
}

The backgrounds go in different directions. For Firefox changing to:

-moz-linear-gradient(bottom, #373737, #464646 5px);

to be the same as the Webkit rule works for me. Will have to go through all the browsers to normalise them, e.g. the -ms rule is the same as Firefox and I don't see a gradient at all in your screenshot [edit: I see you're using IE9 rather than 10, so no linear gradient].

Last edited 2 years ago by duck_ (previous) (diff)

ocean902 years ago

comment:4 ocean902 years ago

  • Keywords has-patch added

19163.patch: Tested in Chrome, Firefox and Opera on Mac.

comment:5 duck_2 years ago

Per http://dev.w3.org/csswg/css3-images/#linear-gradient-syntax should the "proposed W3C Markup" rule use "to top"?

comment:6 ocean902 years ago

duck_: I saw this today too, seems to be new. Should then update all our gradients, see #16461.

comment:7 helenyhou2 years ago

I noticed this today as well, but I think it's actually been reversed for a while. It's been bothering me but I thought it was personal until I took a closer look in Webkit. In any case, patch works for me, same browsers as ocean90.

comment:8 ryan2 years ago

  • Component changed from UI to Admin Bar

comment:9 nacin2 years ago

  • Keywords commit added

comment:10 azaozz2 years ago

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

In [19220]:

Fix admin bar background gradients, props ocean90, fixes #19163

Note: See TracTickets for help on using tickets.