hotfix(frontend): WebKitエンジンの場合background-imageをunsetする (taiyme#294)

bettaku · Oct 14, 2024 · 5d14c39 · 5d14c39
1 parent 72b202d
commit 5d14c39
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 62 deletions.
diff --git a/idea/MkDisableSection.vue b/idea/MkDisableSection.vue
@@ -36,11 +36,14 @@ defineProps<{
 	cursor: not-allowed;
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 16px
+		transparent 0px 10px,
+		var(--c) 6px 16px
 	);
 	--c: color(from var(--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;
+	}
 }
 </style>
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
@@ -31,6 +31,14 @@ 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/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -90,12 +90,15 @@ const cancel = () => {
 	overflow-y: hidden;
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 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] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -307,14 +307,17 @@ onUnmounted(() => {
 .embedCodeGenPreviewRoot {
 	position: relative;
 	background-color: var(--bg);
+	cursor: not-allowed;
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--panel) 6px,
-		var(--panel) 16px
+		transparent 0px 10px,
+		var(--panel) 6px 16px
 	);
-	cursor: not-allowed;
+
+	// 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
@@ -94,11 +94,14 @@ const props = defineProps<{
 	&:global(.gray) {
 		background-image: repeating-linear-gradient(
 			135deg,
-			transparent,
-			transparent 10px,
-			var(--bg) 6px,
-			var(--bg) 16px
+			transparent 0px 10px,
+			var(--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/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
@@ -229,13 +229,16 @@ onMounted(() => {
 	background: var(--acrylicBg);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
+	border-radius: 0 0 6px 6px;
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--panel) 6px,
-		var(--panel) 16px
+		transparent 0px 10px,
+		var(--panel) 6px 16px
 	);
-	border-radius: 0 0 6px 6px;
+
+	// 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
@@ -71,14 +71,22 @@ $bodyInfoHieght: 16px;
 	padding: 16px;
 	border-radius: 8px;
 	background-color: var(--panel);
-	background-image: repeating-linear-gradient(
-		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 16px
-	);
-	--c: transparent;
+
+	&.isNotResponding,
+	&.isSilenced,
+	&.isSuspended,
+	&.isBlocked {
+		background-image: repeating-linear-gradient(
+			135deg,
+			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] & {

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
@@ -215,12 +215,15 @@ const showImageMenu = (ev: MouseEvent) => {
 	background-color: var(--bg);
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 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] & {
 		--c: color(from color-mix(in srgb, var(--bg), black 15%) srgb r g b / 0.25);

diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
@@ -533,12 +533,15 @@ onDeactivated(() => {
 	background-color: var(--bg);
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 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] & {
 		--c: color(from color-mix(in srgb, var(--bg), black 15%) srgb r g b / 0.25);

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
@@ -1223,12 +1223,15 @@ defineExpose({
 	overflow: auto;
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 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] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
@@ -69,14 +69,20 @@ $bodyInfoHieght: 16px;
 	padding: 16px;
 	border-radius: 8px;
 	background-color: var(--panel);
-	background-image: repeating-linear-gradient(
-		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 16px
-	);
-	--c: transparent;
+
+	&.isSilenced,
+	&.isSuspended {
+		background-image: repeating-linear-gradient(
+			135deg,
+			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] & {

diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
@@ -125,12 +125,15 @@ function reduceFrequency(): void {
 .root {
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 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] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/components/global/MkFooterSpacer.vue b/packages/frontend/src/components/global/MkFooterSpacer.vue
@@ -16,12 +16,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 	background-clip: content-box;
 	background-image: repeating-linear-gradient(
 		135deg,
-		transparent,
-		transparent 10px,
-		var(--c) 6px,
-		var(--c) 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] & {
 		--c: rgb(0 0 0 / 0.02);

diff --git a/packages/frontend/src/scripts/tms/get-bg-color.ts b/packages/frontend/src/scripts/tms/get-bg-color.ts
@@ -3,16 +3,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import tinycolor from 'tinycolor2';
-
 export const getBgColor = (elem?: Element | null | undefined): string | null => {
 	if (elem == null) return null;
 
 	const { backgroundColor: bg } = window.getComputedStyle(elem);
 
-	if (bg && tinycolor(bg).getAlpha() !== 0) {
+	if (bg && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(bg)) {
 		return bg;
 	}
 
-	return getBgColor(elem.parentElement);
+	return elem.parentElement == null ? null : getBgColor(elem.parentElement);
 };