CSS 화살표 firefox/chrome에서 음수 여백

Question

크롬에서 펑키 한 것처럼 보이는 CSS H2 화살표/랩 배너가 있습니다. 화살표는 다음과 같이 생성됩니다 : H2 (음수 여백으로 설정) 후 H2의 외측에 음수 여백을두고 놓습니다.

Chrome에서 어떤 이유로이 화살표는 새로 고침시 계속 튀어 나옵니다. 처음에는 페이지를로드 할 때 화살표가 잘 보이고 가장자리가 튀어 나오면 새로 고침됩니다. IE/FireFox에서 잘 작동합니다. 모든 통찰력은 높이 평가됩니다!

JsFiddle Example

Answer 1

변경 right:0 left:100%에 : 의사 요소는 그것의 대응 경계를 계산에 문제를 가진 후.

Here's a fiddle.