CSS3 Box-Shadow 속성으로 스크롤 지연?

Question

나는 추가했다 box-shadow Mac OS X 앱에서 볼 수있는 동일한 그림자 테두리 효과를 제공하기 위해 최근 페이지 섹션에. 멋져 보였지만 페이지에서 위아래로 스크롤하면 지연이 발생했습니다. 나는 보통 성가신 배경 이미지와 수많은 이미지와 임베디드 비디오가있는 페이지에서만 이것을 봅니다.기침 마이 스페이스 기침). 나는 원래 박스 쉐이드를 사용하기로 결정했기 때문에 이미지를 사용해야 할 필요가 없어서 스크롤 지연의 가능성을 제거 할 수 있습니다.

나는 CSS3이 여전히 새롭다는 것을 알고 있지만 이것이 지연의 이유입니까? 섀도우가 소프트웨어 렌더링 된 것입니까? 상자 그림자를 작은 요소에 적용하면 전혀 지연되지 않습니다. 다른 사람이 이것을 경험했는지 궁금합니다.

방금 스택 오버 플로우 프론트 페이지에서 시도해 보았습니다. #content 설정과 함께 FireBug를 사용하는 DIV :

-moz-box-shadow: 1px 1px 10px;

그리고 나중에 약간의 스크롤 지연을 발견했습니다. Firefox 3.5를 사용하고 있습니다.

내 질문은, 내 페이지 섹션에 Mac OS X 스타일 테두리를 추가하려면이 속성을 사용하는 몇 가지 대안이 무엇입니까?

참고로, 상자 그림자를 하단이 아닌 요소의 상단, 왼쪽 및 오른쪽에만 적용 할 수 있는지 아는 사람이 있습니까? 나는 시도했다 1px -1px 10px 그러나 여전히 바닥에 그림자가 표시됩니다. 두 번째 오프셋을 계속 줄이면 결국 바닥에서 그림자를 제거하지만 상단 그림자는 이제 더 어둡고 더 큽니다.

그리고 네, 나는 Box-Shadow의 기사를 다음과 같이 보았습니다.

• CSS3 정보
• Fredericiana의 블로그

Answer 1

최선의 방법은 사용하는 것입니다 -moz-border-image 대신에. 두 가지 문제를 모두 해결해야합니다.

예를 들어 이와 같은 이미지를 사용할 수 있습니다. , 이와 같은 CS와 결합했습니다

-moz-border-image: url(shadow.png) 10 / 10px;

그림자를 만들려면. 그리고 이미지를 사용하고 있으므로 원하는 경우 바닥 그림자도 남길 수 있습니다.

---

당신은 바닥에서 그림자를 제거 할 수 없을 것입니다. -moz-box-shadow; 아무것도 "Box Shadow"라고 불리지 않습니다. 전체 상자에 그림자를 적용합니다. 당신은 각면에 별도로 그림자를 지정할 수 없습니다. border, 말하다. 당신이 할 수있는 최선은 그림자의 배치, 흐림 및 퍼짐으로 바이올린입니다. 그러나 그것은 필연적으로 반대쪽에 어두운 그림자로 이어집니다.

StackoverFlow에서 시도 할 때 상자 그림자 지연도 얻습니다. 내가 시도 할 때 Safari의 성능에도 영향을 미칩니다. -webkit-box-shadow, Firefox에서만큼 눈에 띄지는 않지만. 성능은 미래에 희망적으로 향상 될 것이지만, 나는 그림자가 항상 약간 내가 아는 한 영향 ~이다 소프트웨어 렌더링.

Answer 2

이것은 이틀 전부터 WebKit에서 수정되었습니다. :)

https://bugs.webkit.org/show_bug.cgi?id=22102

당신은 밤에 크롬을 집어 들기 위해 시도 할 수 있습니다.

나는 FF3.6과 FF4를 보았고 거기에서 끔찍한 스크롤 성능을 보지 못하므로 거기에서도 해결 될 수 있습니다.

Answer 3

이 문제는 현재 날짜 기준으로 Android 용 Chrome에서 여전히 지속됩니다. 일부 Box Shadow Combos는 스크롤 성능이 저하됩니다. 제 경우에는 두 개의 삽입 된 상자 샤이도 (예 : 상단 / 하단)를 쌓으면 설명 된 문제가 발생합니다. 내가 제공 할 수있는 유일한 해결책은 박스 섀도를 덜 복잡하게 만들고 다시 시도하는 것입니다. 그것은 불만족 스럽지만 그렇습니다. 대신에 국경 이미지 솔루션을 사용하거나 영향을받는 박스 쉐이드를 완전히 제거 할 수 있습니다. 이것이 곧 고쳐지기를 바랍니다. BTW Firefox의 Android 버전에는 더 이상 문제가 없습니다 (CSS3의 경우). 또한 두 브라우저의 데스크탑 버전은 제 경우에는 영향을받지 않습니다.

Answer 4

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

구식 및 새 브라우저의 크로스 브라우저 버전. 간단한 IMG : http://i28.tinypic.com/2njzkt1.png

스타일 :결정된 이미지의 경우 너무 과부하 Browser