CSS 배경 헤더가 모바일 브라우저에서 울리는 것

Question

누군가이 페이지를보고이 문제를 해결하는 방법을 알고 있는지 알 수 있습니까?

Original page link

이 페이지는 데스크탑 크롬과 파이어 폭스 브라우저에서 작동합니다. 모바일 480p에 반응하는 개발자 미리보기에서도 작동합니다.

그러나 모바일 또는 태블릿에서이 페이지를 볼 경우 헤더 배경과 흐림이 불안정합니다. 정렬에서 벗어나서 바탕 화면 에서처럼 이미지를 스크롤하지 않습니다.

내 생각에 일부 CSS는 모바일 크롬에서 지원되지 않습니다. 이 경우인가요?

문제를 해결하는 데 도움을주십시오. 감사

가 여기에 JS Fiddle

.title_EService { 
    background: url(http://advantageaccountants.com.au/image/e_service_header.jpg) fixed center 3.67em no-repeat; 
    width: 100%; 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
} 

.title_EService > header { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    padding: 20px 30px; 
    background: inherit; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

.title_EService > header::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200%; 
    height: 200%; 
    background: inherit; 
    background-attachment: fixed; 
    -webkit-filter: blur(4px); 
    filter: blur(4px); 
} 

.title_EService > header::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.25) 
} 

.title_EService > header > h1 { 
    font-weight: bold; 
    margin: 0; 
    color: white; 
    position: relative; 
    z-index: 1; 
} 

Answer 1

임은 더 프로입니다,하지만 난 당신의 CSS에서 보았을 때 내가 아마 고정 높이가 클래스를 통해 UR 문제가 될 줄 알았는데 (.navbar) 자체 마진, 나는 그것을 조정하는 모바일에 대한 spicific 코드를 보지 않는다.

.navbar { 
    position: relative; 
    min-height: 50px; */ 
    margin-bottom: 20px; */ 
    border: 1px solid transparent; 
}