Merge pull request #17 from JadenTepper/scroll-fix

Mac Safari bad initial scaling fix and a scrolling fix

Author: Ashwagandhae

src/routes/+layout.svelte

@@ -71,10 +71,6 @@
 			name: 'padding',
 			unit: 'px'
 		},
-		fontSize: {
-			name: 'font-size',
-			unit: 'rem'
-		},
 		fontWeight: {
 			name: 'font-weight',
 			unit: ''
@@ -129,6 +125,18 @@
 			}
 		})
 	);
+	onDestroy(
+		settings.subscribe(['fontSize'], function (_key: string) {
+			const remFontSize = settings.data.fontSize.value as number;
+
+			const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+			const pixelValue = remFontSize * rootFontSize;
+			const roundedPixelValue = Math.round(pixelValue); // Round to nearest px
+			const roundedRemFontSize = roundedPixelValue / rootFontSize;
+
+			document.body.style.setProperty('--font-size', roundedRemFontSize + "rem");
+		})
+	)
 	onDestroy(
 		settings.subscribe(Object.keys(cssVarIndex), function (key: string) {
 			const name = cssVarIndex[key].name;

src/routes/app/+page.svelte

@@ -276,6 +276,13 @@
 		}
 	}
 
+	function fixScroll(event: Event) {
+		const el = event.currentTarget as HTMLDivElement;
+		if (el.scrollTop !== 0) {
+			el.scrollTop = 0;
+		}
+	}
+
 	// TODO:
 	// add custom background color
 	// add command K
@@ -350,7 +357,7 @@
 					<div class="box-control">
 						<BoxControl flowId={$selectedFlowId} />
 					</div>
-					<div class="flow" class:customScrollbar={settings.data.customScrollbar.value}>
+					<div class="flow" class:customScrollbar={settings.data.customScrollbar.value} on:scroll={fixScroll}>
 						<Flow on:focusFlow={focusFlow} flowId={$selectedFlowId} />
 					</div>
 				{/key}