Why Ionic uses `-webkit-transform: translate3d()`?


#1

It may be a stupid question, but why does Ionic apply -webkit-transform: translate3d() to some elements?
Does it have anything to do with hardware acceleration? How does that work?

Well I realized its associated with the scroll capability.

How do I came to this question: actually I’m trying to navigate in a google map, but as I swipe the screen it just scrolls the fixed map up and down, instead of navigating, altering the translate3d() property.

So I would also like to know how to disable “scroll”, so the user can navigate through the map.

I’m feeling very stupid right now. Hopefully someone can shed a light on the subject for me. Thanks!


#2

hi,

here is explanation of css transform:

did you disable ionic tap for DOM with google map ?

<div data-tap-disabled="true">
    <div id="google-map"></div>
</div>

#3

Thanks!

I’m getting the css transform idea. It had nothing to do with my map issue, though, in fact the problem was quite simple: I didn’t know I had to specify draggable="true" in the angular google-map directive (duh!).

About the data-tap-disabled="true", what’s it for?


#4

here is some info:

http://ionicframework.com/docs/api/page/tap/

and you can also check this post:

http://ionicframework.com/blog/hybrid-apps-and-the-curse-of-the-300ms-delay/