From 661393e40b4b52abd0a27a98faae619c270e1f83 Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Wed, 5 Jul 2023 09:14:08 +0900 Subject: [PATCH 1/7] fix(font): disable MacOS browsers' default subpixel font smoothing make text look nicer rather than blurry re #474 --- src/elements/GlobalStyle.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index cde674c..de4c976 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -6,6 +6,12 @@ import {ress} from 'src/utils/cssRess'; import {resetRangeInput} from 'src/utils/cssResetRangeInput'; import {resetSearchInput} from 'src/utils/cssResetSearchInput'; +const disableSafariSubpixelFontSmoothing = ` + body { + -webkit-font-smoothing: antialiased; + } +`; + const makeMapFullscreen = ` :root, body, @@ -90,6 +96,7 @@ export const GlobalStyle = createGlobalStyle` ${ress} ${resetRangeInput} ${resetSearchInput} + ${disableSafariSubpixelFontSmoothing} input { color: inherit; /* Prevent Chrome from applying "internal-light-dark" to override the body element's color property */ From fab79aa57cfc01d514d88fee89609d98b898d0f0 Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Wed, 5 Jul 2023 09:41:24 +0900 Subject: [PATCH 2/7] fix(savedplaces): hard-wrap long URL prevent horizontal scroll bars from appearing fix #475 --- src/elements/GlobalStyle.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index de4c976..a244fee 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -12,6 +12,12 @@ const disableSafariSubpixelFontSmoothing = ` } `; +const hardwrapLongWord = ` + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } +`; + const makeMapFullscreen = ` :root, body, @@ -97,6 +103,7 @@ export const GlobalStyle = createGlobalStyle` ${resetRangeInput} ${resetSearchInput} ${disableSafariSubpixelFontSmoothing} + ${hardwrapLongWord} input { color: inherit; /* Prevent Chrome from applying "internal-light-dark" to override the body element's color property */ From 5fbd66a034c5f8da4fdc2668bb757b59bb79d8e6 Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Wed, 5 Jul 2023 12:00:42 +0900 Subject: [PATCH 3/7] refactor(globalstyle): create a stacking context at the root directory of Next.js make sure a React Portal popup will always be rendered above everything else re #476 --- src/elements/GlobalStyle.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index a244fee..40933d3 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -18,6 +18,13 @@ const hardwrapLongWord = ` } `; +const setRootStackingContext = ` + /* See Section 8 of https://www.joshwcomeau.com/css/custom-css-reset/ */ + #__next { + isolation: isolate; + } +`; + const makeMapFullscreen = ` :root, body, @@ -104,6 +111,7 @@ export const GlobalStyle = createGlobalStyle` ${resetSearchInput} ${disableSafariSubpixelFontSmoothing} ${hardwrapLongWord} + ${setRootStackingContext} input { color: inherit; /* Prevent Chrome from applying "internal-light-dark" to override the body element's color property */ From a6216c928e9c76ffea06d5f08823bf5eaebb6f7a Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Wed, 5 Jul 2023 09:14:08 +0900 Subject: [PATCH 4/7] fix(font): disable MacOS browsers' default subpixel font smoothing make text look nicer rather than blurry re #474 --- src/elements/GlobalStyle.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index cde674c..de4c976 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -6,6 +6,12 @@ import {ress} from 'src/utils/cssRess'; import {resetRangeInput} from 'src/utils/cssResetRangeInput'; import {resetSearchInput} from 'src/utils/cssResetSearchInput'; +const disableSafariSubpixelFontSmoothing = ` + body { + -webkit-font-smoothing: antialiased; + } +`; + const makeMapFullscreen = ` :root, body, @@ -90,6 +96,7 @@ export const GlobalStyle = createGlobalStyle` ${ress} ${resetRangeInput} ${resetSearchInput} + ${disableSafariSubpixelFontSmoothing} input { color: inherit; /* Prevent Chrome from applying "internal-light-dark" to override the body element's color property */ From 1d714fdbb9384e7a70f847241a9e87920902d797 Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Wed, 5 Jul 2023 09:41:24 +0900 Subject: [PATCH 5/7] fix(savedplaces): hard-wrap long URL prevent horizontal scroll bars from appearing fix #475 --- src/elements/GlobalStyle.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index de4c976..a244fee 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -12,6 +12,12 @@ const disableSafariSubpixelFontSmoothing = ` } `; +const hardwrapLongWord = ` + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } +`; + const makeMapFullscreen = ` :root, body, @@ -97,6 +103,7 @@ export const GlobalStyle = createGlobalStyle` ${resetRangeInput} ${resetSearchInput} ${disableSafariSubpixelFontSmoothing} + ${hardwrapLongWord} input { color: inherit; /* Prevent Chrome from applying "internal-light-dark" to override the body element's color property */ From e2bfecb16158226a7733372d1737e9f999cd1911 Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Wed, 5 Jul 2023 12:00:42 +0900 Subject: [PATCH 6/7] refactor(globalstyle): create a stacking context at the root directory of Next.js make sure a React Portal popup will always be rendered above everything else re #476 --- src/elements/GlobalStyle.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index a244fee..40933d3 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -18,6 +18,13 @@ const hardwrapLongWord = ` } `; +const setRootStackingContext = ` + /* See Section 8 of https://www.joshwcomeau.com/css/custom-css-reset/ */ + #__next { + isolation: isolate; + } +`; + const makeMapFullscreen = ` :root, body, @@ -104,6 +111,7 @@ export const GlobalStyle = createGlobalStyle` ${resetSearchInput} ${disableSafariSubpixelFontSmoothing} ${hardwrapLongWord} + ${setRootStackingContext} input { color: inherit; /* Prevent Chrome from applying "internal-light-dark" to override the body element's color property */ From 63433a5574f02d3db7ca15d9346903a3ab798350 Mon Sep 17 00:00:00 2001 From: Masa Kudamatsu Date: Tue, 10 Oct 2023 08:10:32 +0900 Subject: [PATCH 7/7] fix(font): disable MacOS Firefox subpixel font smoothing Firefox requires its own vendor-specific property to disable subpixel font smoothiing. re #474 --- src/elements/GlobalStyle.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js index 40933d3..5253a55 100644 --- a/src/elements/GlobalStyle.js +++ b/src/elements/GlobalStyle.js @@ -6,8 +6,9 @@ import {ress} from 'src/utils/cssRess'; import {resetRangeInput} from 'src/utils/cssResetRangeInput'; import {resetSearchInput} from 'src/utils/cssResetSearchInput'; -const disableSafariSubpixelFontSmoothing = ` +const disableMacOSSubpixelFontSmoothing = ` body { + -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } `; @@ -109,7 +110,7 @@ export const GlobalStyle = createGlobalStyle` ${ress} ${resetRangeInput} ${resetSearchInput} - ${disableSafariSubpixelFontSmoothing} + ${disableMacOSSubpixelFontSmoothing} ${hardwrapLongWord} ${setRootStackingContext}