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

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!


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>
1 Like


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?

here is some info:


and you can also check this post:


1 Like