Open Radar

 
Summary:
Our series of Kiosk Pro apps are specialized web browsers, designed to make it easy to set up an iPad as a public-facing touchscreen kiosk.  The Wisconsin Department of Transportation recently began using Kiosk Pro to show a webpage to allow visitors to renew vehicle registrations. 

The page is incorrectly rendered in the app, frequently substituting one image on the page for another, which can be seen in the page background and in image icons on the page.  When we look at the page, the HTML + CSS + JS returned to application from web-server appear to be correct.

We believe this is a bug in the underlying UIWebView layer.  In testing, we’ve been unable to replicate the issue in mobile Safari.

Steps to Reproduce:
Build and run attached project.
Wait until  page loads.  (If loading appears to get stuck, exit and relaunch - this is a separate issue.)
For ‘Plate Number’ field, use "shravs", and tap ‘Next’.
Select ‘Credit/Debit Card’, then tap ‘Next’.

Expected Results:
Background of page (body element) will show repeating ‘This is a test site’ image.  Near bottom of page after card number field, four credit card icons will be shown (AmEx, Discover, Mastercard, VISA).   In the footer, a lock icon will be shown.



Actual Results:
There is high likelihood that certain image files will be rendered in the wrong place (see attached screenshots for examples).
If you do not see the problem, tap ‘Cancel’ at the bottom of the e-Payment page, close application, and repeat steps.

Version:
iOS 8.1.2 (12B440)

Configuration:
iPad Air 2, WiFi

Attachments:
'Browser_CU249-690.zip', 'correct_rendering_1.PNG', 'correct_rendering_2.PNG', 'incorrect_rendering_1.PNG' and 'incorrect_rendering_2.PNG' were successfully uploaded.