position sticky with display inline-block not working on safari

If an element with position: sticky; (and position: -webkit-sticky;) ALSO has display: inline-block; it is not working sticky. The sticky-elements HAVE TO have display: block;!

HTML

<div class="element">header</div>
<div class="wrap">
  <div class="content">this does not work on safari!</div>
  <div class="content">x-axes (left and right) dont work with position: sticky.</div>
  <div class="content">position: sticky WITH display: inline-block; does not work on safari</div>
  <div class="content">content</div>
  <div class="sticky">sticky</div>
</div>
<div class="element">footer</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.element {
  background-color: lightgrey;
  height: 200px;
}
.content {
  height: 200px;
  padding: 10px;
  border: 1px solid black;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;

/*
  This will not work on safari!
  This needs to be display: block!
*/
  display: inline-block;
  bottom: 1%;
  right: 1%;
  width: 100px;

/*
  x-axes does not work with position: sticky!
   workarround: margin-left with calc of 100% - ( .sticky width - 1% ) */
  margin-left: calc(100% - calc(100px + 1%));
  padding: 10px;
  background-color: black;
  color: white;
  font-weight: bold;
}