CODEWITHSUNDEEP
csswebkit
Luke Taylor
Luke Taylor

Reputation: 9561

border-radius disappears while animating

I'm trying to emulate a certain kind of menu that can be seen in iOS with CSS. It has menu items in a ul, and clicking each one makes the menu slide over to reveal the page.

However, whenever the menu is sliding (while it's actively sliding) the corners turn square. Then they go back to being rounded after animation is finished.

Here's a jsfiddle with a lot of my superfluous styling code cut out. If you click on either of the titles in the list, you'll see that the corners turn square just as the content is animating. This can be seen again when you press the back button.

I see this issue in the latest Chrome and Safari, but not in Firefox.

Upvotes: 1

Views: 1728

Answers (1)

ellitt
ellitt

Reputation: 833

You could give #modal-content a z-index of 1 (assuming nothing below it has a z-index greater than 1) and it should keep the border-radius during the transition.

.modal-content {
  position:absolute;
  bottom:0;top:0;left:0;right:0;
  margin: 10vh;
  border: 1px solid #ccc;
  border-radius: 15px;
  overflow:hidden;
  z-index: 1;
}

By making .modal-content higher in the element stack, when the transition happens the child elements of .modal-content are moving "underneath" .modal-content. So .modal-contents border isn't obscured by the transitioning child.

Upvotes: 3

Related Questions