Comments (3)
+1 same here on my page
from meteor-tutorials.
I added a condition to the helper that displays the button for starting the tutorial so that it doesn't show up on Safari. I'm sure it isn't perfect, but until we can figure out why these tutorials looks so strange on Safari, I'll be using it.
I used this SO article to get this User Agent check code.
/^((?!chrome|android).)*safari/i.test(navigator.userAgent);
from meteor-tutorials.
UPDATE: my posted fix is invalid, because by fixing this issue on Safari it causes it on Firefox. There is no value of box-shadow's blur parameter that can keep this working on all browsers. Workaround is to delete box-radius from spotlit elements.
————————————————————————————————————————
I isolated the problem in the code below. Fixed in pull request #19. This problem can be fixed by removing border-radius, increasing box-shadow blur from 0 to 33, or decreasing box-shadow radius from 4000 to 2018. The interaction between border-radius and box-shadow seems to cause some kind of rounding error.
<html>
<head>
<style>
.box {
width: 50px;
height: 50px:
left: 50px;
top: 50px;
margin: 50px;
padding: 50px;
box-shadow: 0px 0px 3px 4000px rgba(0, 0, 0, 0.66);
/*
box-shadow: 0px 0px 30px 4000px rgba(0, 0, 0, 0.66);
box-shadow: 0px 0px 40px 4000px rgba(0, 0, 0, 0.66);
box-shadow: 0px 0px 400px 4000px rgba(0, 0, 0, 0.66);
box-shadow: 0px 0px 3px 1000px rgba(0, 0, 0, 0.66);
*/
border-radius:10px;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
<br>
other text
</body>
</html>
from meteor-tutorials.
Related Issues (14)
- Demo? HOT 3
- Customizing "drag to reposition"
- Auto continue after event HOT 3
- spotlight animates to left corner when no spot is set for tutorial step
- Template error: check is not defined HOT 4
- onLoad () animation trigger?
- How do I close the tutorial? HOT 9
- fs.exists is not a function HOT 3
- Bootstrap 3 compatible? HOT 12
- i18n and "skip tutorial" HOT 2
- bump version #? HOT 3
- hardcoded modal width too large for mobile phones HOT 2
- Question: can I use this with other bootstrap package ? HOT 2
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 meteor-tutorials.