Transparent background becomes black when changing from solid colour in Safari

Question

I use headroom.js to hide/show navbar on scroll. Works great. On scrolling up, nav has a solid background colour and when nav is at top, background should be transparent. No issues on Chrome but an issue with Safari.

Markup:

<header class="headroom navigation">
 <div> class="navigation__bg">...</div>
</header>

CSS:

.headroom--not-top {
  .navigation__bg {
    background-color: red;
  }
}

.headroom--pinned {
    transform: translateY(0%);
    .navigation__bg {
      background-color: transparent; // becomes black on Safari most times
    }
}

.headroom {
    will-change: transform;
    transition: transform .5s linear;
}

I cant see why the bg becomes black. Any reason?

score 2 · Accepted Answer · answered Oct 06 '17 at 12:44

2

Well for starters you have

<div> class="navigation__bg">...</div>

it should be: (Closing too early)

<div class="navigation__bg">...</div>

Secondly set your

background-color: transparent;

to

background-color: white, rgba(255,255,255,0);

As transparent = black transparent (rgba(0,0,0,0)) in safari

answered Oct 06 '17 at 12:44

Shaun Moore

118
9

Thanks for that but that never worked. I'll see if it's an issue with the make up and report back. – Sylar Oct 06 '17 at 13:46
By bad, it was actually the markup! It was closing too early as you've said. Thank you! – Sylar Oct 06 '17 at 13:52
1

Glad I could help :) – Shaun Moore Oct 06 '17 at 13:58

Transparent background becomes black when changing from solid colour in Safari

1 Answers1