stripes after scroll up and down

[timnarr]

Hi everyone,

Thank you Mark for your work!
I have a little problem. Only in Safari this error is displayed while you scroll up and down. I took a picture of it and have attached it.

Thanks for your help.

[markgoodyear]

Hey Tim,

Could you clarify what OS version and Safari version you're using? Also, does it happen on the demo?

Cheers
Mark

[timnarr]

Hey Mark,

I am using OSX 10.8.2 and Safari 6.0.2.
The demo works fine. I've checked everything again and found out, that when I remove the border-radius-CSS, everything works fine.

This is my CSS:
#scrollUp {
bottom: 20px;
right: 20px;
opacity: .9;
background: #ff6a5e;
color: #fff;
font-size: 12px;
font-family: sans-serif;
text-decoration: none;
text-align:center;
padding: 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background 200ms linear;
-moz-transition: background 200ms linear;
transition: background 200ms linear;
}

#scrollUp:hover {
opacity: 1;
}

But in the pill-demo you have also used border-radius with 16px.
So I changed it and have used 16px instead of 5px. Works fine.
And if I change it back to 5px, the stripes are back again.

Funny, right? :-D
Thank you for your efforts

[markgoodyear]

That's a strange one! You don't happen to have a demo of yours available to view? I can check it out to see what the issue could be.

[timnarr]

Of course.
http://tim-grochowski.de/test/

On my iMac, the problem is not as bad as on my MacBook Pro. Although I use the same OS and Safari versions.

Be sure to scroll, while you hover the top-button. This causes the real big stripes, as seen on the picture.

Thanks Mark. I really appreciate your help.

Forgive me if my code is not so neat. I have just started to code websites.

[markgoodyear]

Hey Tim,

Thanks for the link. I've had a quick look and it seems it's something to do with the opacity on hover. Could you try removing the opacity:1; on hover and try using a colour for the hover state? I know it's not the best solution, but it's a quick fix until I can resolve this. Hopefully it's a known Safari issue which can be fixed easily.

Cheers
Mark

[timnarr]

Thank you. This works fine and is perfectly good for me.
BTW The twitter-share-button has a similar issue. After several times of hovering (without clicking), the border looks like this:

http://f.cl.ly/items/0i2l36331m0r062F2342/border-radius-issue-safari.jpg