Coder Social home page Coder Social logo

Comments (3)

rootedsoftware avatar rootedsoftware commented on July 30, 2024

+1 same here on my page

from meteor-tutorials.

rootedsoftware avatar rootedsoftware commented on July 30, 2024

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.

enfascination avatar enfascination commented on July 30, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.