Der “Peek-a-boo Bug” ist ein Problem auf Websites, bei dem Dinge auf der Seite plötzlich verschwinden oder sich merkwürdig verhalten. Dies kann passieren, wenn man versucht, die Website mit bestimmten Gestaltungsregeln zu versehen. Es ist so benannt, weil es ähnlich ist wie das Spiel “Verstecken”, bei dem jemand für kurze Zeit verschwindet und dann wieder auftaucht. Webentwickler müssen solche Probleme beheben, damit die Website richtig funktioniert und aussieht.
Der entsteht bei einem variablen Container in der Breite mit einer Box darin bei der z.B. float:left gesetzt ist. Der die innere Box umfliessende Content ist einfach nicht sichtbar. Du kannst die Seite sooft reloaden wie du willst… Ein scrollen (wenn möglich) der Seite lässt den Text hervortreten. Hier mal kurz die Syntax in Kurzform
#aussenContainer
{
background:#FF0000;
border:1px dotted #000000;
margin:1em 15% 1em 13%;
font-size:1em;
}
#innenContainer
{
float:left;
border:1px
solid #00FF00;
padding:10px;
width :130px;
height:130px;
font-size:1.5em;
text-align:center;
}
#clear
{
clear:both;
border:1px
dashed #0000FF;
text-align:center;
}
...
<div id="aussenContainer">;
<div id="innenContainer">;
...
<div>
<div id="clear">;
<div>;
<div>; ... ;
<div>;Dieser Effekt tritt in sehr verschiedenen Zusammenhängen auf, so dass es mitunter schwer ist diesen Bug zu erkennen.
Erste Möglichkeit dies zu beheben wäre, den ClearStyle von der inneren Box zu entfernen. Die Innere Box mit einem Background zu belegen hilft auch – ist aber nicht so toll.
Zweite Möglichkeit dies zu beheben wäre, dem aussenContainer eine feste Breite und Höhe zu geben.
Dritte Möglichkeit dies zu beheben wäre, dem aussenContainer und dem innenContainer position:relative zu geben – Zieht allerdings umfangreiches Testen nach sich.
Ganz witzig und relative einfach ist die vierte mir bekannte Möglichkeit, dem aussenContainer die Eigenschaft line-height zu geben. Muss man evtl. wieder zurücksetzen – aber funktioniert.
#aussenContainer
{
background:#FF0000;
border:1px dotted #000000;
margin:1em 15% 1em 13%;
font-size:1em;
line-height:1em;
}Weitere Infos: https://www.positioniseverything.net/category/coding/css
