Black line at bottom of elastic scrolling in uiwebview?

Question

I have a hybrid iOS app that is essentially a uiwebview that loads HTML from our server. There's a fixed position top bar, a fixed position bottom tab bar, and a scrollable/draggable middle content section with content loaded via AJAX. However, sometimes a one-pixel, gray (#838383) line appears at the bottom of the middle content section when you scroll past the bounds of the content, ie, elastic scrolling. However, it's not consistent. In some tabs of the app, it doesn't show up at all, and I can't figure out what's causing it to appear or in some cases not appear. I've searched all the server-side CSS and HTML for "838383" but nothing turned up.

Normal state:

normal state http://msr-cf.matt.re/lio-app-line3.jpg

Elastic scrolling shows gray line:

scrolling with gray line http://msr-cf.matt.re/lio-app-line.jpg

Elastic scrolling on different page does not have gray line:

scrolling on a different tab does not have gray line http://msr-cf.matt.re/lio-app-line2.jpg

Has anyone experienced this before, know why it's happening, or have a solution?

Answer 1

This may slow down rendering a bit, but try the following:

webviewView.opaque = NO