React

[ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•] ๋ชจ๋ฐ”์ผ Firefox ๋กœ๊ทธ์ธ ์˜ค๋ฅ˜์™€ css

presentKey 2023. 5. 22. 23:39

๐Ÿšฉ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•

์–ด๋А ๋ธŒ๋ผ์šฐ์ €, ๊ธฐ๊ธฐ์—์„œ ์‚ฌ์ดํŠธ๊ฐ€ ์˜๋„๋œ ๋Œ€๋กœ ๋™์ž‘ํ•˜๋„๋ก ์ œ์ž‘ํ•˜๋Š” ๊ธฐ๋ฒ•


๋ชจ๋ฐ”์ผ Firefox์—์„œ ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ์ด ๋˜์ง€ ์•Š๋Š” ์˜ค๋ฅ˜ ๋ฐœ์ƒ

๐Ÿšฉ ๋กœ๊ทธ์ธ ๊ธฐ์กด ๊ตฌํ˜„ ์‚ฌํ•ญ

Firebase Authentication์„ ์ด์šฉํ•ด์„œ ๋ฐ์Šคํฌํƒ‘์—์„œ ์ ‘์†ํ•˜๋ฉด ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ์ด popup ์ฐฝ์œผ๋กœ ๋œจ๊ณ , ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ์—์„œ ์ ‘์†ํ•˜๋ฉด redirect ๋˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

๋ฐ์Šคํฌํƒ‘๊ณผ ๋ชจ๋ฐ”์ผ ๋กœ๊ทธ์ธ ๋ฐฉ์‹์„ ๋‚˜๋ˆˆ ์ด์œ ๋Š” popup ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•ด๋„ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ์—์„œ ์ •์ƒ์ ์œผ๋กœ ๋กœ๊ทธ์ธ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ popup ์ฐจ๋‹จ ๋ฉ”์‹œ์ง€๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ๋ถˆํŽธ์„ ์ค„์ด๊ธฐ ์œ„ํ•ด redirect ๋ฐฉ์‹์œผ๋กœ ๋ณ€๊ฒฝํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. 

 

// ๋ชจ๋ฐ”์ผ ํŒ๋ณ„
export default function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

 


๐Ÿšฉ  Firefox ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ ๊ฐœ์„ 

๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ € ํ…Œ์ŠคํŠธ ์ค‘, Firefox์—์„œ ๋กœ๊ทธ์ธ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

์ ‘์† ๋ธŒ๋ผ์šฐ์ €๊ฐ€ Firefox์ธ ๊ฒฝ์šฐ popup ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋„๋ก ๋ณ€๊ฒฝํ•˜์—ฌ, ์ •์ƒ์ ์œผ๋กœ ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ์ด ๊ฐ€๋Šฅํ•ด์กŒ์Šต๋‹ˆ๋‹ค.

  - firefox์˜ ํ–ฅ์ƒ๋œ ์ถ”์  ๋ฐฉ์ง€ ๊ธฐ๋Šฅ์ด ์›์ธ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

(https://stackoverflow.com/questions/41055699/why-does-firebase-auth-work-for-chrome-but-not-firefox)

export default function isMobile() {
  if (/Firefox/i.test(navigator.userAgent)) return;
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

 

 


Firefox์˜ css

zoom ์†์„ฑ

Firefox์—์„œ ์ฝ˜์†”์ฐฝ์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ๊ณ ๊ฐ€ ๋‚˜์™”์Šต๋‹ˆ๋‹ค.

 

zoom ์†์„ฑ์„ checkbox ํƒ€์ž…์˜ input ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๋Š”๋ฐ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ, Firefox์—์„œ๋Š” ํ•ด๋‹น ์†์„ฑ์„ ์ง€์›ํ•˜์ง€ ์•Š๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

can i use ์‚ฌ์ดํŠธ

scale ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์„œ checkbox ํฌ๊ธฐ๋ฅผ ํ‚ค์šธ ์ˆ˜ ๋„ ์žˆ์—ˆ์ง€๋งŒ, scale ์†์„ฑ์€ IE ์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

์กฐ๊ธˆ ๋” ์•ˆ์ „ํ•˜๊ฒŒ width์™€ height๋กœ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.


number ํƒ€์ž…์˜ input: ํ™”์‚ดํ‘œ ๋ฒ„ํŠผ

number ํƒ€์ž…์˜ input์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์šฐ์ธก์— ํ™”์‚ดํ‘œ ๋ฒ„ํŠผ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

๊ธฐ์กด์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์„œ ํ™”์‚ดํ‘œ ๋ฒ„ํŠผ์„ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค.

input::-webkit-inner-spin-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

 

๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ œ๊ฑฐ๋˜์—ˆ์ง€๋งŒ, Firefox๋Š” ํ™”์‚ดํ‘œ๊ฐ€ ๊ทธ๋Œ€๋กœ ๋‚˜ํƒ€๋‚˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ™”์‚ดํ‘œ ๋ฒ„ํŠผ์ด ์ œ๊ฑฐ ๋  ์ˆ˜ ์žˆ๋„๋ก css๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค.

 

Firefox์—์„œ ํ™•์ธํ•œ input

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

 

์ˆ˜์ •๋œ Firefox input