Я показываю сообщение на своем веб-сайте в следующем стиле:
.basic-message {
position:fixed;
top:3%;
right:3%;
z-index: 1000;
cursor: pointer;
}
оно отлично работает в настольных браузерах, см. Скриншот
или , попробуйте сами .
, но это не работает в мобильном Chrome на Android, где сообщение расположено в верхнем правом углу страницы (но неокно), как если бы его позиции были «абсолютными».
Похоже, это известная проблема, и я успешно попытался добавить метатег:
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">
, что делает «исправленные» хорошона рабочем столе, но также делает веб-сайт не масштабируемым, что недопустимо.
Также я попытался добавить
-webkit-backface-visibility: hidden;
, но это не дает эффекта (по крайней мере, на моем телефоне Android).
Существуют ли другие решения или обходные пути?
EDIT1:
Само сообщение абсолютно тривиально:
.basic-message p {
color: #ffffff;
font-size: 1.4rem;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 0.25em;
padding: 16px;
}
.error-message p {
background: #e94b35;
}
<div class="basic-message error-message">
<p>The text goes here.</p>
</div>
Также,например, эта страница имеет образец фиксированного элемента в правом нижнем углу окна.который перестает корректно работать в мобильном Chrome после масштабирования страницы.
EDIT2:
Добавление -webkit-transform вместе с -webkit-backface-visibility следующим образом
.basic-message {
position:fixed;
top:3%;
right:3%;
z-index: 1000;
cursor: pointer;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
также не действует.
EDIT3
В мобильном эмуляторе MS Edge тоже глюки, см. скриншотыниже:
он скачет и периодически исчезает при прокрутке страницы:
