[크로스 브라우징] 모바일 Firefox 로그인 오류와 css

🚩 크로스 브라우징

어느 브라우저, 기기에서 사이트가 의도된 대로 동작하도록 제작하는 기법

---

모바일 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