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>

Doesn't display properly on Safari browser #16

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions