0

The code in the JSFiddle below creates a menu bar that has a border around it. I thought it might be nice if I added an effect on the li element when you click it to help show that the li element is active. To do this I put the following translation on the li element when it is active

box-shadow: 0 -3px hsl(180, 0%, 22%);
@include transform(translate(0, 2px)); //SCSS Mixin which acts the same as transform: translate(0, 2px);
@include transition(all, 0.25s); //SCSS Mixin which acts the same as transition: all 0.25s;

However, when I used this code, I noticed that the background of the li element didn't follow the border radius whilst the transition was taking place. So I did some research and found this answer to a question which found the same problem. However, this did not provide a solution for me. I would appreciate any help in making the background follow the border radius.

See the image for a visual aid of the problem and the JSFiddle for a code example

Shows border breaking <code>li</code> background

JSFiddle

Community
  • 1
  • 1
Dan
  • 7,286
  • 6
  • 49
  • 114
  • Which browser? For me its working fine... – andreas Aug 12 '16 at 16:53
  • @Andreas Latest version of chrome on windows 10 – Dan Aug 12 '16 at 16:53
  • 1
    Ah sorry my fault, now im seeing it ;) – andreas Aug 12 '16 at 16:54
  • @Andreas Do you know what is causing it? – Dan Aug 12 '16 at 17:01
  • 1
    Long story short, during the transition, the a doesn't have any border radius. You have to add a border radius specifically to the buttons "inside" for it to not show them. For instance, if you put border-radius: 20px; inside every style, it will make all the buttons round, and you won't have the problem any more (except now your buttons are round). It's not animating the outer portion with the border-radius; it's animating what's inside with no border-radius. – Chris Stanley Aug 12 '16 at 17:05

1 Answers1

0

It turns out that this can still be solved by using this answer but instead of placing position: relative and z-index: 1 in the li elements it should be placed in the ul parent.

ul {
  position: relative;
  z-index: 1;
  ...
}

See this JSFiddle for example of it working like it should.

Community
  • 1
  • 1
Dan
  • 7,286
  • 6
  • 49
  • 114