por qué overflow ROMPE la propiedad {position:fixed;} ??, exíste solución?

SLD · #1 (**permalink**) 11/07/2023, 04:46

hola, éste código trabaja 100% bien al abrirse con cualquier teléfono y cualquier browser PC:

Código:

<?php
echo <<<HTML
<html><head><style type="text/css">
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
background:teal;
color:#0f0400;
height:100%;
}
.tc{text-align:center;}

#menu_1_with_icon{
background:tan;
color:#000;
display:inline;
margin-top:-2px;
position:fixed;
}
#menu_1_with_icon:before{
border:1px solid #000;
content:'☰';
}
</style><meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head><body><div id="cosmos">
<div id="menu_1_with_icon"></div>
HTML;
echo str_repeat('<p class="tc">jump!</p>', 98);
echo '</div></body></html>';

sin embargo si agregas la línea:

Código:

echo '<table border="1"><tr><td>https://deliciasnaturales.com/stackoverflow/rwd/template_rwd_menu.php</td></tr></table>';

el "botón" del menú ☰ PIERDE la propiedad fixed. ( es decír al agregar CUALQUIER elemento que genere OVERFLOW )

el error únicamente se aprecia al cargar desde teléfonos
cuál es el error de mi código CSS?
NO PRETENDO solucionar el "overflow"
por qué la propiedad fixed se pierde?
tiene solución sin utilizar ni librerias ni JQUERY ni BOOTSTRAP?

pueden abrir el código con un teléfono (SIN la tabla y CON la tabla) desde aquí:

https://deliciasnaturales.com/stackoverflow/rwd

( la tabla solo prodúce un OVERFLOW, es irrelevante; pueden utilizar CUALQUIER ELEMENTO que genere OVERFLOW y se dañará el "fixed" discúlpen que lo díga de nuevo: increiblemente únicamente sucede con ANDROID )