fix(frontend): color-mixでクラッシュする問題, hslのcalcに失敗する問題など (#304)

taiyme · Nov 7, 2024 · 6710607 · 6710607
1 parent 711ab84
commit 6710607
Show file tree

Hide file tree

Showing 30 changed files with 64 additions and 116 deletions.
diff --git a/idea/MkDisableSection.vue b/idea/MkDisableSection.vue
@@ -39,11 +39,6 @@ defineProps<{
 		transparent 0px 10px,
 		var(--c) 6px 16px
 	);
-	--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset;
-	}
+	--c: rgb(from var(--MI_THEME-error) r g b / 0.25);
 }
 </style>
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
@@ -31,14 +31,6 @@ import { preventLongPressContextMenu } from '@/scripts/tms/prevent-longpress-con
 export async function common(createVue: () => App<Element>) {
 	console.info(`taiyme v${version}`);
 
-	//#region Detect WebKit engine
-	const ua = navigator.userAgent;
-	const isWebkitEngine = ua.includes('AppleWebKit') && !(ua.includes('Chrome') || ua.includes('Chromium'));
-	if (isWebkitEngine) {
-		document.documentElement.dataset.browserEngine = 'webkit';
-	}
-	//#endregion
-
 	if (_DEV_) {
 		console.warn('Development mode!!!');
 

diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
@@ -172,11 +172,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--MI_THEME-accent);
 
 		&:not(:disabled):hover {
-			background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 		}
 
 		&:not(:disabled):active {
-			background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 		}
 	}
 
@@ -221,11 +221,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 
 		&:not(:disabled):hover {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 
 		&:not(:disabled):active {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 

diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
@@ -117,7 +117,7 @@ const bannerStyle = computed(() => {
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+			background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 		}
 
 		> .name {

diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
@@ -231,7 +231,7 @@ onUnmounted(() => {
 	left: 0;
 	width: 100%;
 	height: 64px; // .omitted
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showMoreFade {

diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -94,11 +94,6 @@ const cancel = () => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -267,11 +267,6 @@ export default defineComponent({
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -313,11 +313,6 @@ onUnmounted(() => {
 		transparent 0px 10px,
 		var(--MI_THEME-panel) 6px 16px
 	);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
 }
 
 .embedCodeGenPreviewWrapper {

diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
@@ -96,11 +96,6 @@ const props = defineProps<{
 			transparent 0px 10px,
 			var(--MI_THEME-bg) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	@media (max-width: 700px) {

diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
@@ -111,7 +111,7 @@ onMounted(() => {
 	top: var(--MI-stickyTop, 0px);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background-color: color(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") srgb r g b / 0.85);
+	background-color: rgb(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") r g b / 0.85);
 }
 
 .title {

diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
@@ -235,10 +235,5 @@ onMounted(() => {
 		transparent 0px 10px,
 		var(--MI_THEME-panel) 6px 16px
 	);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -81,47 +81,42 @@ $bodyInfoHieght: 16px;
 			transparent 0px 10px,
 			var(--c) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	&,
 	html[data-color-scheme=light] & {
 		&.isNotResponding {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #ffa500 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #0000ff 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-panel));
 		}
 
 		&.isBlocked {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #ff0000 12.5%, var(--MI_THEME-panel));
 		}
 	}
 
 	html[data-color-scheme=dark] & {
 		&.isNotResponding {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffa500 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #0000ff 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-panel));
 		}
 
 		&.isBlocked {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ff0000 25%, var(--MI_THEME-panel));
 		}
 	}
 }

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
@@ -219,18 +219,13 @@ const showImageMenu = (ev: MouseEvent) => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), black 15%) srgb r g b / 0.25);
+		--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-bg));
 	}
 
 	html[data-color-scheme=dark] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), white 15%) srgb r g b / 0.5);
+		--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-bg));
 	}
 }
 

diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
@@ -537,18 +537,13 @@ onDeactivated(() => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), black 15%) srgb r g b / 0.25);
+		--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-bg));
 	}
 
 	html[data-color-scheme=dark] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), white 15%) srgb r g b / 0.5);
+		--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-bg));
 	}
 }
 

diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
@@ -72,11 +72,11 @@ const avatarUrlRef = computed(() => {
 	padding: 4px 8px 4px 4px;
 	border-radius: 999px;
 	color: var(--MI_THEME-mention);
-	background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
+	background: rgb(from var(--MI_THEME-mention) r g b / 0.1);
 
 	&.isMe {
 		color: var(--MI_THEME-mentionMe);
-		background: color(from var(--MI_THEME-mentionMe) srgb r g b / 0.1);
+		background: rgb(from var(--MI_THEME-mentionMe) r g b / 0.1);
 	}
 }
 

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -831,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 0;
 	width: 100%;
 	height: 64px; // .contentCollapsed
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {

diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
 	left: 0;
 	width: 100%;
 	height: 64px; // .omitted
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
@@ -1147,13 +1147,13 @@ defineExpose({
 
 	&:not(:disabled):hover {
 		> .submitInner {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 
 	&:not(:disabled):active {
 		> .submitInner {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 }
@@ -1227,11 +1227,6 @@ defineExpose({
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -67,7 +67,7 @@ const collapsed = ref(isLong);
 	left: 0;
 	width: 100%;
 	height: 64px; // .collapsed
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {

diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
@@ -77,31 +77,26 @@ $bodyInfoHieght: 16px;
 			transparent 0px 10px,
 			var(--c) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	&,
 	html[data-color-scheme=light] & {
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #0000ff 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-panel));
 		}
 	}
 
 	html[data-color-scheme=dark] & {
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #0000ff 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-panel));
 		}
 	}
 }

diff --git a/packages/frontend/src/components/TmsInstanceTicker.vue b/packages/frontend/src/components/TmsInstanceTicker.vue
@@ -134,8 +134,8 @@ const tickerStateRef = computed(() => getTickerState(props));
 	background: linear-gradient(
 		var(--ticker-bg-deg),
 		rgba(0, 0, 0, 0) calc(100% - 3em),
-		color(from var(--ticker-bg, #777) srgb r g b / 0.35) calc(100% - 3em),
-		color(from var(--ticker-bg, #777) srgb r g b / 0.35) 100%
+		rgb(from var(--ticker-bg, #777) r g b / 0.35) calc(100% - 3em),
+		rgb(from var(--ticker-bg, #777) r g b / 0.35) 100%
 	);
 	color: #fff;
 	text-shadow: /* 0.866 ≈ sin(60deg) */

diff --git a/packages/frontend/src/components/global/MkFooterSpacer.vue b/packages/frontend/src/components/global/MkFooterSpacer.vue
@@ -20,11 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -141,7 +141,7 @@ onUnmounted(() => {
 	backdrop-filter: var(--MI-blur, blur(15px));
 	border-bottom: solid 0.5px var(--MI_THEME-divider);
 	width: 100%;
-	background: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
+	background: rgb(from var(--MI_THEME-bg) r g b / 0.85);
 }
 
 .upper,

diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
@@ -310,7 +310,7 @@ definePageMetadata(() => ({
 	left: 0;
 	width: 100%;
 	height: 64px;
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .bannerStatus {

diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue
@@ -84,7 +84,7 @@ onUpdated(() => {
 		left: 0;
 		width: 100%;
 		height: 64px;
-		background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+		background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 	}
 }