Masterskin

안녕하세요. 마스터스킨입니다.

no20 발표 한지 한달이 되어 갑니다.

현재까지 치명적이다할 버그는 존재하지 않았지만 윈도우즈 OS에서 크롬 브라우저를 사용할 경우에만 발생되는 현상이 있어 패치를 공개합니다.

크롬의 GPU 연산 프로세서는 매우 정교해서 소수점 단위까지 계산됩니다. 따라서 매우 부드러운 장점이 있습니다.

하지만 브라우저의 세로 높이에 대해 포지션(좌표)계산에 있어서 소수점으로 위치하게 될 경우

그래픽이 뿌옇게(블러리) 되는 현상이 이미 아주 오래전부터 골치아픈 현상으로 크롬에 대응하는 디자인을 하는 우리로써

매우 골치아픈것도 사실입니다.

아래 패치는 메인슬라이드에 사용되는 텍스트가 정 중앙에 배치될 경우 포지션이 소수점에 위치하지 않도록 1px씩 더하는 방법입니다.

2017년 10월 24일 이전 구매고객 대상으로한 패치 이며,

이후의 고객께서는 이미 적용되어 아래 내용을 적용하실 필요가 없습니다.

패치방법

1. 첨부된 patch.zip 파일에 압축을 풀고 FTP를 이용하여 아래 위치한 폴더에 업로드 해주세요.

- 위치 : /sde_design/[사용하고계신 스킨 번호]/layout/basic/tool/user_custom/ <-- user_custom 폴더에 올려주세요.

2. 관리자페이지 > 디자인관리 > 스마트디자인편집창을 오픈하여 아래 경로의 파일을 오픈합니다.

- 위치 : 전체화면보기탭 > 레이아웃 > 기본레이아웃 > tool > user_custom > head.html

3. 오픈된 head.html 화면의 html 창에 아래 소스를 추가하신뒤 저장 버튼을 눌러주세요.

<!--@css(/layout/basic/tool/user_custom/style.css)-->

<!--@js(/layout/basic/tool/user_custom/script.js)-->

<!--@css(/layout/basic/tool/user_custom/patch_style.css)-->

<!--@js(/layout/basic/tool/user_custom/patch_js.js)-->

4. 이미 열려있는 스마트디자인편집창에서 아래 경로의 파일을 오픈합니다.

- 위치 : 전체화면보기탭 > 레이아웃 > 기본레이아웃 > tool > user_custom > patch_style.css

5. 오픈된 patch_style.css 화면의 html 창에 아래 소스를 추가하신뒤 저장 버튼을 눌러주세요.

/*

◼◼◼◼◼◼◼◼◼ 2017.10.24 텍스트블러 패치 ◼◼◼◼◼◼◼◼◼◼

*/

/* 윈도우버전의 크롬브라우저 에서만 텍스트가 뿌옇게 보여지는 현상이 있습니다. */

/* 세로높이 기준 가운데 정렬을 사용하는 디자인에서 전세계 공통으로 발생되는 현상이며 왜 크롬에만 뿌옇게 나오냐면 */

/* 크롬 브라우저에서 연산하는 프로세서가 성능이 너무 좋아 텍스트가 위치한 좌표를 소수점까지 인식하게 되는데 */

/* 해당 과정에서 정수가 아닌 소수 또는 홀수의 경우에는 뿌옇게 보이는 현상이 발생됩니다. */

/* 현 이슈를 크롬에서는 버그로 분류해야되는지 아직까지 이슈가 픽스되지 않고 있어 우리는 이 현상에 대해 어쩔수 없이 수동으로 살짝 만져줘야 합니다. ㅠㅠ /*

/* 아래 메인슬라이드 갯수(순서) 번호에 따라 텍스트가 뿌옇게 보인다면 0px 또는 1px 을 번갈아 수정해보세요. */

.main_slide.kenburns .masterskin-track  .masterskin-slide:nth-child(1) h2 { margin-top: 0px}

.main_slide.kenburns .masterskin-track  .masterskin-slide:nth-child(2) h2 { margin-top: 1px}

.main_slide.kenburns .masterskin-track  .masterskin-slide:nth-child(3) h2 { margin-top: 1px}

.main_slide.kenburns .masterskin-track  .masterskin-slide:nth-child(4) h2 { margin-top: 1px}

.main_slide.kenburns .masterskin-track  .masterskin-slide:nth-child(5) h2 { margin-top: 1px}

/*아래코드는 나머지 배너들에 해당하는 코드입니다. 수정하지 마세요.*/

.v-align-transform {

-webkit-transform: translateY(-50%)!important;

-moz-transform: translateY(-50%)!important;

-ms-transform: translateY(-50%)!important;

-o-transform: translateY(-50%)!important;

transform: translateY(-50%)!important;

}

6. patch_style.css 에 추가된 설명을 잘 읽고 고객님의 수정내용에 맞게 수정을 해주세요.

감사합니다.

ps. 설정이 어려우신 분은 고객센터로 문의주세요.