Transition translate, width and height at same time in Safari - html

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.
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%);
}
<div></div>

Answer 1

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 for reference). Use transform-origin to define the origin point of the transformation.
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);
}
<div></div>

Answer 2

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!)
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;
}
<div class="outer">
<div class="inner">
</div>
</div>

Answer 3

Try this. I changed the definition of the transition.
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 200px;
transition: all 1s;
width: 100px;
}
div:hover {
height: 150px;
width: 150px;
transform: translate(-50%, -50%);
}
<div></div>

Answer 4

It's working on Safari
You need to use -webkit- with transition and transform
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%);
}
<div></div>