Doesn't display properly on Safari browser
waiholiu opened this issue · comments
That is what the demo app looks like on Safari. Page loads fine on Chrome though.
+1 same here on my page
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);
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>