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>
```
I think the problem is caused by the `absolute` positioning of your element to the `body`. After the transition is done, the browser recalculate the `absolute` position to the parent element and `translate` is coming in the way. The solution might be easier than you think.

Create an outer container which "safes" the place for the inner container to grow in left/top direction. I think the example below will explain the rest. **(tested in safari aswell!)**

```css
body {
  /* just for better looks */
  margin: 2rem;
}

/* out container zone */
.outer {
  border: 1px solid #222;
  width: 150px;
  height: 150px;
  position: relative;
}

/* inner element aligned to the right */ 
.inner {
  background-color: green;
  width: 100px;
  height: 100px;
  transition: all .5s;
  position: absolute;
  right: 0;
  bottom: 0;
}

/* no translate, no problems */ 
.inner:hover {
  width: 150px;
  height: 150px;
}
```

```html
<div class="outer">
  <div class="inner">
  </div>
</div>
```