Chrome - положение зафиксировано

Question

Я добавляю вкладку в правую часть экрана, но при просмотре страницы в Chrome она в основном смещена за пределы экрана.Тем не менее, в Firefox и других браузерах он, кажется, идеально настроен вправо.

Снимки экрана обоих браузеров:

Firefox: Chrome:

Также JS Fiddle показывает это: https://jsfiddle.net/gcu6d7qL/1/

Мой HTML-код:

<a href="#" data-toggle="modal" data-target="#property-alert-modal" id="property-alert-cta" class="property-alert-cta -right u-rounded-4">
    <div>
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span></span>
    </div>
</a>

CSS:

.property-alert-cta.-right {
    right: 0;
}
.u-rounded-4 {
    border-radius: 4px;
}
.property-alert-cta {
    z-index: 2;
    position: fixed;
    top: 30%;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
}

У кого-нибудь есть какие-либо исправления или предложения по этому поводу?

Спасибо

Answer 1

Мне кажется, есть проблема с реализацией chrome и safari режима записи: vertical-rl; для фиксированной позиции. В вашем случае одним из простых решений было бы перенести отступ на div, инкапсулирующий ваш диапазон. Поскольку проблемы возникают из-за того, что хром не компенсирует должным образом заполнение для вертикально расположенного элемента. Ниже приведен код:

 .property-alert-cta.-right {
    right: 0;
}
.u-rounded-4 {
    border-radius: 4px;
}
.alert-padding {
 padding: 1.5em 0.8em;

.property-alert-cta {
    z-index: 2;
    position: fixed;
    top: 30%;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
}

    <a href="#" data-toggle="modal" data-target="#property-alert-modal" id="property-alert-cta" class="property-alert-cta -right u-rounded-4">
    <div class="alert-padding">
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span></span>
    </div>
</a>

Answer 2

обернуть якорь в div:

        <div id="property-alert-cta" class="right">
      <a href="#" data-toggle="modal" data-target="#property-alert-modal" class="property-alert-cta -right u-rounded-4">
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span>
        </span>           
      </a>
    </div>

CSS:

  body {
    font-family: Arial;
  }
  .right {
      right: 0;
  }
  .u-rounded-4 {
      border-radius: 4px;
  }
  #property-alert-cta {
      z-index: 2;
      position: fixed;
      top: 30%;
  }

  .c-white {
    color: white;
  }

  #property-alert-cta a {
    text-decoration: none;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
  }

Answer 3

-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

Замените эти строки кода CSS следующим.

-webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;

Answer 4

Кажется, это из-за padding.При добавлении right: 1.6em (2x0.8em) это решается для chrome.

Я не могу сказать вам, что здесь реализовано по-другому в chrome, так как это не зависит от размера блока div.

ОБНОВЛЕНИЕ В спецификации W3 (https://www.w3.org/TR/CSS2/visuren.html#propdef-position), атрибут «right» описывается следующим образом:

Как и «top», но указывает, как далекоправый край поля смещен влево от правого края содержащего его блока. Для относительно расположенных блоков смещение относительно правого края самого блока.

Как японять, даже с отступом правый край должен быть точно на правом краю окна.