fix: chat móvil usa position:fixed inset:0 en lugar de height:100dvh
100dvh falla en Android Chrome cuando aparece/desaparece la barra de URL. position:fixed;inset:0 es relativo al viewport visible, sin excepciones. Desktop mantiene card centrada con position:relative. Se elimina el hack de visualViewport ya que no es necesario con fixed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
da9e5a0f68
commit
97e1bdb72b
@@ -21,47 +21,41 @@
|
|||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Móvil: pantalla completa */
|
/* Móvil: body como lienzo neutro */
|
||||||
body {
|
body {
|
||||||
background: #111b21;
|
background: #111b21;
|
||||||
height: 100vh;
|
|
||||||
height: 100dvh;
|
|
||||||
height: -webkit-fill-available;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop: fondo con gradiente + chat centrado como frame */
|
/* #chat-root ocupa todo el viewport visible con position:fixed
|
||||||
@media (min-width: 640px) {
|
— esto es la única forma 100% fiable en Android Chrome
|
||||||
body {
|
(100dvh falla cuando la barra de URL aparece/desaparece) */
|
||||||
background: #0d1117;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* El contenedor del chat */
|
|
||||||
#chat-root {
|
#chat-root {
|
||||||
width: 100%;
|
position: fixed;
|
||||||
height: 100vh;
|
inset: 0;
|
||||||
height: 100dvh;
|
|
||||||
height: -webkit-fill-available;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #111b21;
|
background: #111b21;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Desktop: card centrada */
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
body {
|
||||||
|
background: #0d1117;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
#chat-root {
|
#chat-root {
|
||||||
|
position: relative;
|
||||||
|
inset: auto;
|
||||||
width: 420px;
|
width: 420px;
|
||||||
height: 90vh;
|
|
||||||
height: 90dvh;
|
height: 90dvh;
|
||||||
max-height: 820px;
|
max-height: 820px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 24px 64px rgba(0,0,0,.6);
|
box-shadow: 0 24px 64px rgba(0,0,0,.6);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -110,7 +104,6 @@
|
|||||||
var newMsgCount = 0;
|
var newMsgCount = 0;
|
||||||
var lastCount = 0;
|
var lastCount = 0;
|
||||||
var observer = null;
|
var observer = null;
|
||||||
var vpInited = false;
|
|
||||||
|
|
||||||
function checkBottom() {
|
function checkBottom() {
|
||||||
if (!msgsEl) return true;
|
if (!msgsEl) return true;
|
||||||
@@ -175,32 +168,16 @@
|
|||||||
scrollBottom();
|
scrollBottom();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ajustar altura al teclado virtual (una sola vez) */
|
|
||||||
function initViewport() {
|
|
||||||
if (vpInited || !window.visualViewport) return;
|
|
||||||
vpInited = true;
|
|
||||||
var root = document.getElementById('chat-root');
|
|
||||||
if (!root) return;
|
|
||||||
function update() {
|
|
||||||
if (window.innerWidth < 640) {
|
|
||||||
root.style.height = window.visualViewport.height + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.visualViewport.addEventListener('resize', update);
|
|
||||||
update();
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bajar al fondo cuando el componente emite scroll-chat */
|
/* Bajar al fondo cuando el componente emite scroll-chat */
|
||||||
window.addEventListener('scroll-chat', function () {
|
window.addEventListener('scroll-chat', function () {
|
||||||
isAtBottom = true; newMsgCount = 0; updateBadge(); scrollBottom();
|
isAtBottom = true; newMsgCount = 0; updateBadge(); scrollBottom();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () { init(); initViewport(); });
|
document.addEventListener('DOMContentLoaded', function () { init(); });
|
||||||
|
|
||||||
/* livewire:load: Livewire terminó de arrancar — re-init por si el DOM cambió */
|
/* livewire:load: Livewire terminó de arrancar — re-init por si el DOM cambió */
|
||||||
document.addEventListener('livewire:load', function () {
|
document.addEventListener('livewire:load', function () {
|
||||||
init();
|
init();
|
||||||
initViewport();
|
|
||||||
/* Usar hook oficial para scroll después de cada update */
|
/* Usar hook oficial para scroll después de cada update */
|
||||||
Livewire.hook('message.processed', function () {
|
Livewire.hook('message.processed', function () {
|
||||||
if (isAtBottom) scrollBottom();
|
if (isAtBottom) scrollBottom();
|
||||||
|
|||||||
Reference in New Issue
Block a user