Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Hover text replication in Safari (Harlowe)

Hi all, odd CSS/Harlowe/Safari problem here. I've attached an image of what's going on.

I'm using a hover-text glow effect with a little bit of transition animation. (You can see it in action here: http://bit.ly/28YvRxE )

It works perfectly in every browser except Safari. Viewed on that browser, when in hover state, the link text is duplicated, clipped and without the glow effect, at the bottom of what I'm guessing is the content-box element. (The only time this doesn't happen is if the window is so small that there isn't room for it to be seen; the replicated text appears at the same pixel distance from the base text no matter how the window is sized.)

Just skimming the CSS I can't figure out what could be causing this to render. I have a 15% pad at the top of tw-story, but if it were resulting from that, I'd expect this to show up in Chrome etc. as well, not just Safari.

So is this a -webkit/Safari issue? I know Safari has a wonky history with hover states.


Here is the CSS governing the effect:
.enchantment-link:hover, tw-link:hover {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0px;
  border: none;
  font: normal 35px/1 "Averia Serif Libre", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgb(255,255,255) , 0 0 20px rgb(255,255,255) , 0 0 30px rgb(255,255,255) , 0 0 40px rgba(155,41,0,1) , 0 0 70px rgba(204,65,37,1) , 0 0 80px rgba(204,65,37,1) , 0 0 100px rgba(204,65,37,1) , 0 0 150px rgba(255,0,0,1) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

Sign In or Register to comment.