Отрицательное поле не работает в представлении телефона - PullRequest
Новая
       10

Отрицательное поле не работает в представлении телефона

1 голос
/ 17 октября 2019

Я пытаюсь добиться частично скрытого объекта, сдвигая объект за пределы экрана.

Я пытался использовать отрицательное поле, относительное положение и свойства сверху и справа, а также функцию перевода.

Проблема в том, что он отлично работает в браузерах, но когда я вижу его в симуляции телефона, смещение оси X исчезает, а размер объекта уменьшается. Часть, которую я хочу скрыть (вне экрана), появляется, но это происходит только по оси X.

View in browser

View on phone simulation

Как видно, объект все еще частично скрыт сверху, но выходит с правой стороны.

Вот мой код: 

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

.circles {
  float: right;
}

.circle {
  background-image: linear-gradient(30deg, rgb(0, 0, 0), rgb(30, 30, 30), rgb(60, 60, 60));
  position: relative;
}

#big-circle {
  height: 40vw;
  width: 40vw;
  border-radius: 20vw;
  transform: translate(4vw, -8vw);
}

#small-circle-1 {
  width: 3vw;
  height: 3vw;
  border-radius: 1.5vw;
  bottom: 30vw;
}

#small-circle-2 {
  width: 2vw;
  height: 2vw;
  border-radius: 1vw;
  bottom: 9vw;
  left: 30vw;
}
<div class="circles">
  <div class="circle" id="big-circle"></div>
  <div class="circle" id="small-circle-1"></div>
  <div class="circle" id="small-circle-2"></div>
  <div class=""></div>
</div>

1 Ответ

1 голос
/ 17 октября 2019

Проблема в том, что ваш круг прокручивается.

Вы можете решить свою проблему, используя oveflow: hidden; в своем .circle -классе, как я делал ниже: 

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

.circles {
  float: right;
  overflow: hidden;    //    <- this will fix it. :)
}

.circle {
  background-image: linear-gradient(30deg, rgb(0, 0, 0), rgb(30, 30, 30), rgb(60, 60, 60));
  position: relative;
}

#big-circle {
  height: 40vw;
  width: 40vw;
  border-radius: 20vw;
  transform: translate(4vw, -8vw);
}

#small-circle-1 {
  width: 3vw;
  height: 3vw;
  border-radius: 1.5vw;
  bottom: 30vw;
}

#small-circle-2 {
  width: 2vw;
  height: 2vw;
  border-radius: 1vw;
  bottom: 9vw;
  left: 30vw;
}
<div class="circles">
  <div class="circle" id="big-circle"></div>
  <div class="circle" id="small-circle-1"></div>
  <div class="circle" id="small-circle-2"></div>
  <div class=""></div>
</div>
...