z-index 在 safari 上失败 - 是转换问题吗？

Question

I've tried solutions to similar questions but can't figure out for the life of me how to get the text to show on top of my poor custom buttons in Safari! They show perfectly in Chrome and Firefox... but that won't help iOs users of course.

Any suggestions for how to get these to display with the text on top of the intended background properly?

HTML:

<a href="#" class="dark-button border">Register</a>
<a href="#" class="light-button border">Register</a>

CSS:

/* Hexagon Button Style */
.dark-button,
.light-button{
  position: relative;
  display: block;
  background: transparent;
  width: 280px;
  height: 48px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1.8px;
  text-decoration: none !important;
  text-transform: uppercase;
    font-weight:600;
  margin: 15px auto;
  font-family: Orbitron, Helvetica, sans-serif;
 
}
.dark-button:before,
.dark-button:after,
.light-button:before,
.light-button:after{
  position: absolute;
  content: '';
  width: 280px;
  left: 0px;
  height: 24px;
  z-index: -1;
}

.dark-button:before,
.light-button:before{
  transform: perspective(8px) rotateX(3deg);
}
.dark-button:after,
.light-button:after{
  top: 24px;
  transform: perspective(8px) rotateX(-3deg);
}

/* Hex Button color styles */
.dark-button{
    color: #ffffff;
}
.light-button{
    color: #2c2a2b;
}
.dark-button.border:before,
.dark-button.border:after {
  background: #2c2a2b;
}
.light-button.border:before,
.light-button.border:after {
  background: #ededed;
}
/* Hex Button hover styles */
.dark-button.border:hover:before,
.dark-button.border:hover:after,
.light-button.border:hover:before,
.light-button.border:hover:after{
  background: #BDBDBD;
}
.dark-button.border:hover,
.light-button:hover{
  color: #ffffff;
}

>> Here's the CodePen link

Answer 1

It does appear, as hinted at in the question, that the various transforms are creating the problem. A non null transform can create a new stacking context - though exactly why the different browsers treat the aggregate of transforms differently I don't know.

However, I'd like to suggest a simpler way of creating the look - using clip-path on the anchor element. This obviates the need for pseudo elements and transforms so keeps things simple as far as stacking contexts are concerned.

This snippet only has the CSS required for the green button but the principle is the same for the other buttons. And you will want to play around with the % settings on the clip path to get exactly the pointy look that you want.

 /* Hexagon Button Style */ /* Green Button Style */ .green-button { position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 48px; line-height: 38px; text-align: center; font-size: 14px; letter-spacing: 1.8px; text-decoration: none !important; text-transform: uppercase; font-weight: 600 !important; color: #ffffff; margin: 15px auto; font-family: Orbitron, Helvetica, sans-serif; clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); background-color: #4f9f45; } .green-button:hover { color: #ffffff; }

 <a href="#" class="green-button border">Register</a>

Note: clip-path is not supported on IE so users may have to put up with a rectangular button if IE is still in use.