CODEWITHSUNDEEP
htmlcsssafaricss-transitions
AC3
AC3

Reputation: 355

Dropdown transition not working in Safari

I have a navigation where some items have a dropdown. In Firefox and Chrome everything is working like it's supposed to. But in Safari the transition isn't happening at all.

I've searched around a bit if safari is having issues with transitions but other transitions on the page don't have any problems.

I've included a fiddle with code.

HTML

<nav>
  <ul>
    <li><a href="">lorem</a></li>
    <li class="dd">
      <a href="" class="dd-trigger">ipsum</a>
      <ul class="dd-list">
        <li><a href="">sit</a></li>
        <li><a href="">amet</a></li>
      </ul>
    </li>
    <li><a href="">dolor</a></li>
  </ul>
</nav>

CSS

nav > ul:after {
  display: table;
  clear: both;
  content: '';
}

nav {
  margin-top: 60px;
}
nav > ul {
  background: turquoise;
}
nav > ul > li {
  float: left;
  margin-left: 20px;
}

.dd {
  position: relative;
}
.dd:hover .dd-list {
  height: auto;
  opacity: 1;
  transform: translateY(100%);
}

.dd-list {
  background: lightgray;
  position: absolute;
  bottom: 0;
  transform: translateY(97%);
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 250ms ease,  transform 250ms ease,  height 250ms ease;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul a {
  display: block;
  color: white;
  padding: 10px 15px;
}
ul a:hover {
  background: darkturquoise;
}

Upvotes: 0

Views: 156

Answers (3)

AlexG
AlexG

Reputation: 5929

I've set the browser prefixes and added a height: 1px; to .dd-list. JSFiddle

CSS

nav > ul:after {
  display: table;
  clear: both;
  content: '';
}

nav {
  margin-top: 60px;
}
nav > ul {
  background: turquoise;
}
nav > ul > li {
  float: left;
  margin-left: 20px;
}

.dd {
  position: relative;
}
.dd:hover .dd-list {
  height: auto;
  opacity: 1;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}

.dd-list {
  background: lightgray;
  position: absolute;
  bottom: 0;
  transform: translateY(97%);
  -webkit-transform: translateY(97%);
  -moz-transform: translateY(97%);
  -ms-transform: translateY(97%);
  -o-transform: translateY(97%);
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -webkit-transition: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -moz-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -ms-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
  -o-transform: opacity 250ms ease, transform 250ms ease, height 250ms ease;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul a {
  display: block;
  color: white;
  padding: 10px 15px;
}
ul a:hover {
  background: darkturquoise;
}

Upvotes: 1

Ilija Lončarević
Ilija Lončarević

Reputation: 144

I solved it using a little hack..

Setting height: 1px, is that okay to you? And also setting -webkit-transform and -webkit-transition support.

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

Prefix -webkit- before all your tranform css like this

-webkit-transform: translateY(100%);

Transform works in safari only with prefix -webkit-.

Good habit is to use all prefix with tranform css

transform:
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:

This way transform will work in all browsers

Upvotes: 0

Related Questions