firefox and safari fixes

index.html

@@ -328,13 +328,13 @@ Like so:
 	but Ebbinghaus was the first to do actual <i>experiments.</i>
 	(which have been replicated)
 </words>
-<words x=193 y=169 w=70 no-bg class="comic_text">
+<words x=193 y=169 w=70 no-bg class="comic_text" style="color:rgba(0,0,0,0.35)">
 	plz...
 </words>
-<words x=278 y=195 w=70 no-bg class="comic_text">
+<words x=278 y=195 w=70 no-bg class="comic_text" style="color:rgba(0,0,0,0.35)">
 	kill...
 </words>
-<words x=348 y=234 w=70 no-bg class="comic_text">
+<words x=348 y=234 w=70 no-bg class="comic_text" style="color:rgba(0,0,0,0.35)">
 	me...
 </words>
 <words x=20 y=350 w=440 h=60>
@@ -1813,7 +1813,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
 <span style="display:inline-block; position: relative; top: -14px; left: 14px;">
 	Written, drawn, and programmed by
 	<br>
-	<a target="_blank" href="https://ncase.me/" style="font-size:2em; display:inline-block; line-height:1em">
+	<a target="_blank" href="https://www.patreon.com/ncase" style="font-size:2em; display:inline-block; line-height:1em">
 	Nicky Case
 	</a>
 </span>

js/comic.js

@@ -317,7 +317,7 @@ window.onscroll = function(){
 	for(var i=0;i<splashes.length;i++){
 		var s = splashes[i];
 		var bounds = s.getBoundingClientRect();
-		s.contentWindow.IS_IN_SIGHT = (bounds.y<innerHeight && bounds.y+bounds.height>0);
+		s.contentWindow.IS_IN_SIGHT = (bounds.top<innerHeight && bounds.top+bounds.height>0);
 	}
 
 	// Also, iframe scrollables
@@ -326,7 +326,7 @@ window.onscroll = function(){
 	simulations.forEach(function(sim){
 		if(!sim.src){
 			var bounds = sim.getBoundingClientRect();
-			if(bounds.y<innerHeight+BUFFER && bounds.y+bounds.height>-BUFFER){
+			if(bounds.top<innerHeight+BUFFER && bounds.top+bounds.height>-BUFFER){
 				sim.src = sim.getAttribute("will_source");
 				//console.log("Loading "+sim.src+"...");
 			}
@@ -341,7 +341,7 @@ window.onscroll = function(){
 			if(gotoSrc){
 
 				var bounds = iframe.getBoundingClientRect();
-				if(bounds.y<innerHeight+BUFFER && bounds.y+bounds.height>-BUFFER){
+				if(bounds.top<innerHeight+BUFFER && bounds.top+bounds.height>-BUFFER){
 					iframe.src = gotoSrc;
 					console.log("Loading "+iframe.src+"...");
 				}

sims/calendar/calendar.css

@@ -53,6 +53,7 @@ input[type=range]::-webkit-slider-thumb{
     border-radius: 8px; 
     background: #333;
     cursor: pointer;
+    border:none;
 }
 input[type=range]::-moz-range-thumb{
 	width: 15px;
@@ -60,5 +61,6 @@ input[type=range]::-moz-range-thumb{
     border-radius: 8px; 
     background: #333;
     cursor: pointer;
+    border:none;
 }
 

sims/ebbinghaus/ebbinghaus.css

@@ -77,6 +77,7 @@ input[fullw]{
     outline: none;
 }
 .timing_slider{
+    margin-top: 20px;
     margin-bottom: 20px;
 }
 
@@ -89,6 +90,7 @@ input[fullw]{
     border-radius: 8px; 
     background: #ff4040;
     cursor: pointer;
+    border:none;
 }
 .timing_slider::-moz-range-thumb{
 	width: 15px;
@@ -96,6 +98,7 @@ input[fullw]{
     border-radius: 8px; 
     background: #ff4040;
     cursor: pointer;
+    border:none;
 }
 
 
@@ -107,6 +110,7 @@ input[fullw]{
     border-radius: 8px; 
     background: #333;
     cursor: pointer;
+    border:none;
 }
 .decay_slider::-moz-range-thumb{
 	 width: 15px;
@@ -114,6 +118,7 @@ input[fullw]{
     border-radius: 8px; 
     background: #333;
     cursor: pointer;
+    border:none;
 }
 
 
@@ -126,6 +131,7 @@ input[fullw]{
     border-radius: 8px; 
     background: #ffDD00;
     cursor: pointer;
+    border:none;
 }
 .sweet_slider::-moz-range-thumb{
 	width: 15px;
@@ -133,6 +139,7 @@ input[fullw]{
     border-radius: 8px; 
     background: #ffDD00;
     cursor: pointer;
+    border:none;
 }
 
 .auto_optimize{

sims/ebbinghaus/ebbinghaus.js

@@ -406,28 +406,17 @@ function update(){
 
 		// DRAW.
 
-		// Days
-		/*ctx.strokeStyle = "#ddd";
-		ctx.lineWidth = 1;
-		ctx.beginPath();
-		for(var t=0; t<10; t++){
-			var from = _project(t,0);
-			var to = _project(t,1);
-			ctx.moveTo(from.x,from.y);
-			ctx.lineTo(to.x,to.y);
-		}
-		ctx.stroke();*/
-
 		// Ideal Forgetting
-		//ctx.fillStyle = "#FFD700";
-		var tl = _project(0,optimal+OPTIMAL_RANGE);
-		var br = _project(10,optimal-OPTIMAL_RANGE);
-		var gradient = ctx.createLinearGradient(0, tl.y, 0, br.y);
-		gradient.addColorStop(0.0, "hsl(51, 100%, 50%, 0)");
-		gradient.addColorStop(0.5, "hsl(51, 100%, 50%, 0.5)");
-		gradient.addColorStop(1.0, "hsl(51, 100%, 50%, 0)");
-		ctx.fillStyle = gradient;
-		ctx.fillRect(tl.x, tl.y, br.x-tl.x, br.y-tl.y);
+		if(optimal!=999){
+			var tl = _project(0,optimal+OPTIMAL_RANGE);
+			var br = _project(10,optimal-OPTIMAL_RANGE);
+			var gradient = ctx.createLinearGradient(0, tl.y, 0, br.y);
+			gradient.addColorStop(0.0, "hsla(51, 100%, 50%, 0)");
+			gradient.addColorStop(0.5, "hsla(51, 100%, 50%, 0.5)");
+			gradient.addColorStop(1.0, "hsla(51, 100%, 50%, 0)");
+			ctx.fillStyle = gradient;
+			ctx.fillRect(tl.x, tl.y, br.x-tl.x, br.y-tl.y);
+		}
 
 		// DRAW THE POTENTIAL CURVES
 		ctx.lineJoin = ctx.lineCap = "round";

sims/helpers.js

@@ -35,7 +35,7 @@ function _modifyFlashCard(fcard){
 		var x = bg.getAttribute("sx") || 0;
 		var y = bg.getAttribute("sy") || 0;
 		bg.style.backgroundPosition = (-x)+"px "+(-y)+"px";
-		var w = 400;//p.getBoundingClientRect().width;
+		var w = 400;
 		bg.style.backgroundSize = Math.round((1600/w)*50)+"%";
 	}
 

sims/leitner/leitner.css

@@ -64,6 +64,9 @@ button:focus {
 button:hover{
 	top:-2px;
 }
+button:active{
+	color:#000;
+}
 
 input[type=range]{
 	-webkit-appearance: none;
@@ -84,6 +87,7 @@ input[type=range]::-webkit-slider-thumb{
     border-radius: 8px; 
     background: #333;
     cursor: pointer;
+    border:none;
 }
 input[type=range]::-moz-range-thumb{
 	width: 15px;
@@ -91,5 +95,6 @@ input[type=range]::-moz-range-thumb{
     border-radius: 8px; 
     background: #333;
     cursor: pointer;
+    border:none;
 }
 

sims/multicard/multicard.css

@@ -97,7 +97,13 @@ body{
 	transform: rotateY(180deg);
 }
 #ccard_front, #ccard_back {
-	backface-visibility: hidden;
+	
+	-webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -o-backface-visibility: hidden;
+    backface-visibility: hidden;
+
 	position: absolute;
 	top: 0;
 	left: 0;

sims/singlecard/singlecard.css

@@ -54,7 +54,13 @@ body{
 
 /* Front & Back */
 .front, .back {
-	backface-visibility: hidden;
+	
+	-webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -o-backface-visibility: hidden;
+    backface-visibility: hidden;
+
 	position: absolute;
 	top: 0;
 	left: 0;

sims/type/type.js

@@ -53,6 +53,7 @@ for(var i=0; i<suggestionsUL.children.length; i++){
 
 			window.NO_TYPE_SOUND = true;
 			answer.oninput();
+			answer.focus();
 			window.NO_TYPE_SOUND = false;
 
 			alternateBoops();