Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Doesn't display properly on Safari browser #16

Open
waiholiu opened this issue Oct 27, 2015 · 3 comments
Open

Doesn't display properly on Safari browser #16

waiholiu opened this issue Oct 27, 2015 · 3 comments

Comments

@waiholiu
Copy link

That is what the demo app looks like on Safari. Page loads fine on Chrome though.

screen shot 2015-10-27 at 10 58 45 pm
@rootedsoftware
Copy link
Collaborator

+1 same here on my page

@rootedsoftware
Copy link
Collaborator

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);

enfascination added a commit to enfascination/meteor-tutorials that referenced this issue Apr 7, 2017
@enfascination
Address Safari bug on rendering of box-shadow
d1eb803 
This change fixes Issue TurkServer#16 (at least for me)
@enfascination enfascination mentioned this issue Apr 7, 2017
Open
@enfascination
Copy link

enfascination commented Apr 7, 2017 •
edited
Loading

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@enfascination @rootedsoftware @waiholiu