레몬그린 블로그

최근 들어 개발하면서 사파리에서만 일어나는 문제가 너무 많았다. 태그의 playsinline, svg의 태그에 아무런 색을 주지 않으면 투명이 아니라 검은색으로 색칠되는 문제 등등... 프론트엔드를 하면서 유독 사파리만 비표준 혹은 동작이 다른 부분이 많아 속이 터질 지경이었다. 심지어 나는 윈도우를 사랑하는 개발자인데 ㅠ 윈도우에는 사파리 (Webkit) 브라우저가 없다는 게 참 힘들었다. 테스트도 못하는 환경이라니. 그래서 이번엔 어떻게든 삽질해서 알아낸 윈도우에서 웹킷 브라우저를 사용할 수 있는 방법을 알려드리겠다.  1. WSLWindows Subsystem for Linux, 이하 WSL은 윈도우 환경에서 리눅스 시스템을 사용할 수 있게 해주는 기능이다. WSL2에 들어오면서 WSLg라는 기..

정답: -webkit-backdrop-filter를 추가로 사용하기. 사파리에서는 vendor prefix와 함께 사용해야한다.

프론트엔드 웹 브라우저 크로스 테스트 가이드 이 브라우저에선 되고 저 브라우저에선 되는 우리 사이트를 살려주세요 특히 영상이요 테스트에 사용할 브라우저 Chrome (Chromium) Firefox Safari (Webkit) Opera Edge 네이버 웨일 (한국 한정) (Mobile) Android Webview, Safari Mobile Chromium, Firefox, Webkit 한번에 테스트하기 일부 캡챠나 특수한 스크립트 (봇 감지 등)이 들어간 사이트에는 사용하기 어렵습니다. WebDriver를 통해 구동되기 때문에 봇 탐지에 걸리는 경우가 많습니다. Playwright라는 헤드리스 브라우저 에뮬레이터 웹드라이버...어쩌구 패키지를 사용합니다 Node.js와 npm 설치가 필요합니다 htt..