Comments (6)
Hey Tim,
Could you clarify what OS version and Safari version you're using? Also, does it happen on the demo?
Cheers
Mark
from scrollup.
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
from scrollup.
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.
from scrollup.
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.
from scrollup.
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
from scrollup.
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
from scrollup.
Related Issues (20)
- scrollup crashing some sliders HOT 3
- Adding from Bower doesn't download demo files HOT 1
- jQuery Dependency 1.10.2 HOT 10
- Auto hide and auto show after some time HOT 3
- Remove focus border in FF HOT 1
- Use existing elements as "Scroll Up" buttons HOT 4
- It's not working HOT 2
- Can't get it to work sadly :( HOT 2
- Scroll to an div element HOT 1
- Support custom animations HOT 4
- License? HOT 2
- "npm install scrollup" installs something else HOT 5
- Add option for custom class on the anchor tag HOT 2
- Lose focus
- Multiple instances possible?
- Clickable area is restricted
- bower data problem
- scrollup repository on Yarn
- Uncaught TypeError: $.scrollUp is not a function with jQuery 3 and NPM
- Add an option to add discernible name HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scrollup.