Richmarker disappers in higher zoom lever in mobile safari (iphone,ipad)

[GoogleCodeExporter]

Demo link or sample code:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/exampl
es/richmarker.html

What steps will reproduce the problem?
Zoom a marker to high zoom level in mobile safari browser. 

Expected result:
Marker is displayed on map.

Actual result:
Marker disappears.

Browser / Operating System:
eg on iPhone 4S, iOS 5.1.1/ Safari mobile

Additional comments:
The more markers loaded the lower zoom level is needed to replicate problem.

Original issue reported on code.google.com by RWo...@gmail.com on 21 May 2012 at 10:17

[GoogleCodeExporter]

I am experiencing the same problem

Original comment by BigPin...@gmail.com on 21 Jun 2012 at 1:02

[GoogleCodeExporter]

I've found a fix for mobile device. After some research and debugging, I can 
give you an explanation:

The Google Maps API uses the -webkit-transform: matrix(a,b,c,d,f); CSS property 
to do pinch-zoom and panning. It's all very pretty, but it seems there is a bug 
on webkit based browsers on the iPad (I tried three other browsers, not just 
Safari). I noticed that many (if not most) div elements that were placed in the 
map for map tiles, overlays, shadows, etc all had -webkit-transform: 
translateZ(0px); applied. I added that line to my img and div elements and 
instantly fixed my problem.

I haven't tried it by adding the style through a linked stylesheet, only by 
modifying each element directly, but there you go; a solution:

element.style.webkitTransform = "-webkit-transform: translateZ(0px);";

it's iPad/iPhone bug... to solve add -webkit-transform: translateZ(0px); to 
anything that disappears.

RichMarker.prototype.onAdd = function() {
  if (!this.markerWrapper_) {
    this.markerWrapper_ = document.createElement('DIV');
    this.markerWrapper_.style['position'] = 'absolute';

    /// FIX : Add the following line. Add the if condition to affect mobile device. Otherwise, you can remove it
    if(isMobileDevice)this.markerWrapper_.style['-webkit-transform'] = 'translateZ(0px)';

...

Original comment by BigPin...@gmail.com on 21 Jun 2012 at 2:29

[GoogleCodeExporter]

I experienced the same bug. That fixed it.  Thanks

Original comment by m...@mirkomay.com on 28 Sep 2012 at 12:11

[GoogleCodeExporter]

That is correct, adding translateZ(0); fixes it.

Original comment by tomasl...@gmail.com on 5 Dec 2013 at 2:46