Question: Is there any way to animate `transform: translate`, `height` and `width` at same time in **Safari**? I have a bug. After transition is finished, element will jump a few pixels away. Here is [fiddle](https://jsfiddle.net/919rfd8z/2/).

```css
div {
  background-color: green;
  height: 100px;
  left: 200px;
  position: absolute;
  top: 200px;
  transition: transform 1s, height 1s, width 1s;
  width: 100px;
}

div:hover {
  height: 150px;
  width: 150px;
  transform: translate(-50%, -50%);
}
```

```html
<div></div>
```

Answer: 
The jump happens because your height- and width values are pixel-based, and your transform is percentages, which results in sub-pixels. Try changing your approach by animating `scale` instead (it's always a good idea to try to keep your animations restricted to transforms and opacity anyway. See [this article](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) for reference). Use `transform-origin` to define the origin point of the transformation.

```css
div {
  background-color: green;
  height: 100px;
  left: 200px;
  position: absolute;
  top: 200px;
  transition: transform 1s;
  width: 100px;
  transform-origin: right bottom;
}

div:hover {
  transform: scale(1.5);
}
```

```html
<div></div>
```
**It's working on Safari**  

You need to use `-webkit-` with `transition` and `transform` 

```css
div {
  background-color: green;
  height: 100px;
  left: 200px;
  position: absolute;
  top: 200px;
  -webkit-transition: all 1s;
  width: 100px;
}

div:hover {
  height: 150px;
  width: 150px;
  height: 150px;
  width: 150px;
  -webkit-transform: translate(-50%, -50%);
}
```

```html
<div></div>
```