How to remove white lines when using Google Maps API on iPad?

Question

I'm using custom styling to create a blue map using Google Maps API V3.

It renders fine across different browsers on a desktop, but when I view it on an iPad there is a vertical white line present. Further, when scrolling there's a horizontal line, as shown in the photo above.

Here is a JSFiddle example of my code in action.

  var myOptions = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            styles: styles
        };

JSFiddle of custom colour styling

Is there a way to remove or smooth out these lines?

Answer 1

The solution would be to ignore all webkit's specific prefix styling.

-webkit-appearance: none;

Tested on iPad within iOS Simulator, running iOS 7.1: http://jsfiddle.net/dreamyguy/xrHar/91/

Safari's documentation on -webkit-appearance