How to overcome weird "placeholder" issue in mobile Safari

I'm facing a very weird bug on my website, a bug that only surfaces in mobile Safari (tested on iPhone5, iOS8.1). Below are a few links to live pages where each page has a search input control:

http://ift.tt/1E0w1MN

http://ift.tt/1DAIiGv

http://ift.tt/1E0w0ID

The weird behavior is that when using mobile Safari, after typing 2 or 3 characters the background of the parent element as well as the input control itself dissapear. All that remains is the cursor itself.

Here's the markup of the input control of the first example:

<input type="text" name="q" id="q" autocomplete="off" placeholder="- search the jungle -" value="" class="searchfield" />

I've been stripping away attributes, changing names, etc of that input box until I figured out what triggered it. It turns out it is the placeholder attribute. When I remove it, the issue is gone.

I've been looking online for known problems with placeholder attributes in mobile Safari, but I've found nobody with this weird issue. I am there suspecting that it is using placeholder in combination with some other thing to trigger this bug.

Of course an easy solution would be to remove placeholder text altogether, but I find that solution to be too brute force for now, and I'm really curious what this bug is about.