2012-09-12 3 views
3

Jelly Bean WebView에서 배경 고정 CSS 속성이 올바르게 작동하지 않는 것 같습니다 (애플리케이션 내부와 기본 Android 브라우저 사용).background-attachment가 Jelly Bean WebView에서 렌더링을 망칠까요?

이 속성을 설정하면 백그라운드 이미지가 콘텐츠 위에로드됩니다. 즉, 콘텐츠가 백그라운드 이미지 뒤에 있습니다.

은 여기 내 관련 HTML 코드입니다 :

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="target-densitydpi=device-dpi"> 
<meta name="viewport" content="initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css"> 
<style type="text/css"></style></head> 
<body> 
<div id="right-keys"> 
    <a href="keypress://1"><img src="./gesture-background_files/one.png"></a><br /> 
    Film24<br />      
</div> 
<div id="right-keys-vertical"> 
    <a href="keypress://1"><img src="./gesture-background_files/one.png"></a><br /> 
    Film24<br /> 
</div> 
<div id="footer"> 
    MUSCADE<span class="large">EPG</span> 
</div> 
</body> 
</html> 

그리고 여기에 CSS의 관련 부분 :

body { 
    background-image: url(hot-black-background.jpg); 
    background-color: black; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: bottom left; 
} 

#right-keys, #right-keys-vertical { 
    position: absolute; 
    right: 10px; 
    width: 100px; 

    text-align: center; 
    text-shadow: black 2px 2px 0px; 
} 

#right-keys img, #right-keys-vertical img { 
    height: 90px; 
    margin-bottom: 0; 
} 

#footer { 
    position: absolute; 
    right: 10px; 
    bottom: 10px; 
    font-size: 20px; 
} 

그것은 조금 긴하지만 유일한 중요한 부분은 background-attachmentbackground-position 속성에 있습니다 CSS 파일의 맨 위. 내가 제거하면 모든 것이 잘 작동합니다.

알려진 버그입니까? 누구든지 해결 방법을 제안 할 수 있습니까?

은 다음은 젤리 빈 기본 브라우저 (안 크롬)에서를 열어보십시오 수 있도록 파일에 대한 링크입니다 : 위치 관련 및 Z- 인덱스를 사용할 수있는 절대에 대한

http://212.92.197.78/gesture/gesture-background.htm 
+0

나 [이 질문에 (생각 나게 일부 브라우저에서 제대로 표시되지 않습니다 만들기 때문에 졸탄의 솔루션은 나에게 잘 작동하지

http://stackoverflow.com/q/11982733/248058). – Knu

답변

3

그것은 젤리 브라우저에서 당신이 bottom 또는 background-position에 대한 right 오른쪽을 기준으로 어떤 요소가 당신의 위치 또는 관련된

body { 
    background-image: url(any-image.jpg); 
    background-attachment: fixed; 
    background-position: bottom; 
} 

또는 아무것도를 사용하는 경우 밝혀 : Z- 인덱스에 대해 자세히 알아보기 화면 하단 가장자리에 배경 이미지가 겹쳐집니다.

이것은 Jelly Bean의 브라우저에서 가장 확실한 버그입니다.

HTML :

<body> 
    <img id="background" src="any-image.jpg" /> 
    (...) 
</body> 

CSS : 내 웹 사이트에

#background { 
    z-index: -1; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
} 
0

대신 위를 사용하는 다음 코드를 사용하여 내 페이지에서 배경 이미지를 넣어 (Jelly Bean 브라우저에서) 내용 뒤에 배경 이미지를 다시 만들려면 CSS 속성을 제거하기 만하면됩니다. background-attachment : fixed. 는 배경 이미지 (browserstack 테스트)

+0

제 문제는 화면의 왼쪽 하단에 배경을 고정시키고 싶다는 것이 었습니다. 'background-attachment : fixed' 만 제거하면 배경 이미지의 위치를 ​​지정할 수 없습니다. –

관련 문제