Databases
StackOverflow2013
Postsdbo
PObackground-attachment messes up rendering in Jelly Bean WebView?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PObackground-attachment messes up rendering in Jelly Bean WebView?
    text
    copied!<p>It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).</p> <p>If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.</p> <p>Here's my relevant HTML code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;meta name="viewport" content="target-densitydpi=device-dpi"&gt; &lt;meta name="viewport" content="initial-scale=1.0"&gt; &lt;link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css"&gt; &lt;style type="text/css"&gt;&lt;/style&gt;&lt;/head&gt; &lt;body&gt; &lt;div id="right-keys"&gt; &lt;a href="keypress://1"&gt;&lt;img src="./gesture-background_files/one.png"&gt;&lt;/a&gt;&lt;br /&gt; Film24&lt;br /&gt; &lt;/div&gt; &lt;div id="right-keys-vertical"&gt; &lt;a href="keypress://1"&gt;&lt;img src="./gesture-background_files/one.png"&gt;&lt;/a&gt;&lt;br /&gt; Film24&lt;br /&gt; &lt;/div&gt; &lt;div id="footer"&gt; MUSCADE&lt;span class="large"&gt;EPG&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And here's the relevant part of the CSS:</p> <pre><code>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; } </code></pre> <p>It's a bit long, but the only important part are the <code>background-attachment</code> and <code>background-position</code> properties on top of the CSS file. If I remove those, everything works fine.</p> <p>Is this a known bug? Can anyone suggest a workaround?</p> <p>Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):</p> <pre><code>http://212.92.197.78/gesture/gesture-background.htm </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload