IT/잡다구리
[CSS] Chrome 108 업데이트 이후 프린트 미리보기 인쇄 이슈 해결방법
월공
2023. 1. 12. 14:18
728x90
300x250
크롬 108 업데이트 이후 인쇄 미리보기 화면에서부터 css 박살나는 화면 목격
정확히는 테이블에서 rowspan 이 이상하게 보이고, 이미지도 중첩되어서 보이는둥 그런식으로 보임
샘플 이미지는 아래와 같다
각각 다른 이미지임
그냥 아래와 같이 다른거 다 빼버리고 심플하게 이미지 보여주는 html 페이지 있다고 치자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>프린트 테스트</title>
</head>
<body>
<p>이 문서는 HTML 문서입니다.</p>
<img src="./230109110926_7963.jpg"/>
<img src="./230109110926_9264.jpg"/>
</body>
</html>아래는 실행시켰을때의 페이지 화면
근데 해당 페이지에서 크롬에서 인쇄를 하려고 미리보기에서 보면 아래처럼 보인다.
긴 이미지에 고양이가 껴서 들어감
중첩되서 보임
스샷을 찍어놓진 않았으나 테이블 rowspan 에서도 다깨지고 늘어져보이는걸 확인 할 수 있었다.
해결방법은 아래처럼 body 에 contain: size 추가
<style>
body{
contain: size;
}
</style>body 에 추가 하고나니 아래처럼 정상적으로 보이는것을 확인 할 수 있었다.
테이블 rowspan 에서도 동일
108 업데이트 이후 뭐가 바꼈는진 모르겠다만 ..
그래도 금방 해결이되서 다행이다.
혹시 다른 css 에 어떤 영향을 끼칠지 찜찜하니 미디어 프린터에서만 나오게 하는것도 한 방법일듯하다.
728x90
300x250