background-origin not working when border appears on hover

Question

In this Codepen, you'll see I have some links, each with multiple positioned background images. I've set a border to appear on hover, and everything on the site uses box-sizing: border-box. My understanding is that setting the background-origin CSS property to border-box should make those positioning styles render the same no matter what border is on it; the images should be positioned relative to the outer edge of content, padding, and border.

But when you hover over them, it looks like the background-origin isn't working at all. When the border appears, the background images shift to accommodate the space where the border is, thereby acting as though they were background-origin: padding-box. This happens in Safari, Chrome, and Firefox.

Is this a misunderstanding on my part, or a ubiquitous browser bug, or what?

Answer 1

The background shorthand property can be used to set almost every background- property, including background-origin. And when a shorthand property overrides a specific property, the web inspector doesn't show the specific one crossed out in its Rules panel. But if you look at the Computed Style panel, you can see that those link elements are still being computed as background-origin: padding-box.

Adding !important to the background-origin rule, copying it after the background rules, or adding it to the background rules themselves fixes the problem.

Answer 2

I believe the problem is because you don't have any border on those images until you hover over them.

If you add this border:4px solid transparent; to your #block-menu-block-2 ul.menu li a style definition the weird shifting when you hover goes away.

Answer 3

For your #block-menu-block-2 ul.menu li a CSS rule, you have border-box under the wrong property, for what you're trying to do. Right now, you have it under background-origin which is wrong. What you're looking for is the box-sizing property. It should be like so:

#block-menu-block-2 ul.menu li a  {

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;       

}

Now you can add border: 4px solid transparent to your "normal" state, it should be working the way you want it.

You can read more about this nice CSS property here: http://css-tricks.com/box-sizing/