Блог

У меня есть 2 элемента div, где родительский элемент повернут на 10 градусов, а дочерний элемент является липким. В Opera и Chrome переполнения нет, и дочерний элемент перестает быть липким в конце родительского элемента. Однако в Safari дочерний элемент продолжает работать и останавливается после переполнения, и чем больше градусов родительский элемент повернут, тем больше переполнение. я пробовал устанавливать разные свойства переполнения, но это просто останавливает все перемещение. Я также добавил изображение, чтобы показать точную проблему.

 .big-div {
  margin-top: 200px;
  height: 2000px;
  background-color: burlywood;
  width: 100%;
}

.slash-div {
  background-color: blue;
  height: 600px;
  width: 80%;
  transform-origin: bottom right;
  transform: rotate(10deg);
}

.sub-div {
  background-color: coral;
  height: 50px;
  width: 100%;
  position: sticky;
  top: 50px;
} 

 <div style="margin-top: 200px;">
  <div class="slash-div">

    <div class="sub-div">
    </div>

  </div>
</div>
<div class="big-div"></div>