내가 보려고 적어두는 크로스브라우징

내가 보려고 적어두는 크로스브라우징

내가 보려고 적어두는 크로스브라우징이다.

 

input,textarea의 width

width가 font-size에 비례하여 넓어지는데, 넓어지는 비율이 크롬과 사파리가 상이하다.

예를들어 font-size:12px일때 input의 width는 크롬에서 135px, 사파리에서 153px이다.

reset.css에서 해결할 수 없는 것 같다. 내가 생각한 해결책은 input,textarea에 width를 명시해주기

 

IOS 계열과 안드로이드 계열의 font color 기본값

IOS는 blue, 안드로이드는 black이다.

좌: 안드로이드, 우: IOS

해결책 : reset.css에 color 설정하기 잊지말자

 

사파리에서 복사기능 구현할때 주의할점

아래와 같이 하면 사파리에서 catch가 실행된다.

const handleCopy = (text)=> {
	const copyText = await getCopyText(); //api
	await navigator.clipboard.writeText(copyText)
  		.then(() => toast({ isSuccess: true, content: '복사성공' }))
  		.catch(() => toast({ isSuccess: false, content: '복사실패' }));
}

<div className = 'copy' onClick={handleCopy}>복사하기</div>

 

사파리에서는 보안상의 이유로 유저행동 이후에 복사가 실행되지 않으면 무조건 catch가 실행되게 한다.

즉, onClick이후에 일어나는 api call을 보안에 위협이 된다고 판단하고 catch를 실행시키는 것이다.

 

이 경우 나는 .copy위에 마우스 호버를 하면 api call을 하게 해서 복사 버튼 클릭 직전에 copyText를 불러오게 했다.

const [copyText,setCopyText] = useState('');

const handleCopy = (text)=> {
	if(copyText){
		await navigator.clipboard.writeText(copyText)
  			.then(() => toast({ isSuccess: true, content: '복사성공' }))
  			.catch(() => toast({ isSuccess: false, content: '복사실패' }));
    }
}

const apiCall = () =>{
	const _copyText = await getCopyText(); //api
    setCopyText(_copyText)
}

<div className = 'copy' onMouseEnter = {apiCall} onClick={handleCopy}>복사하기</div>

 

 

맞물려있는 컴포넌트의 transition은 동일한 시간을 가져야 한다.

위와 같이 맞물려 있는 컴포넌트의 transition 시간을 다르게 했을때 크롬에서는 문제가 없다. 자동보정이 된다.

하지만 사파리에서는 다음과 같이 매끄러운 transition이 되지 않는다.

 

매끄러운 transition이 되지 않는 사파리

 

이유는 바디의 tranisition이 1s인 반면 사이드바의 transition은 0.5s 이기 때문이다.

이럴때는 transition의 시간을 통일시켜주면 된다.

 

transition:0.5s로 맞춰주니 사파리에서도 매끄럽다.