Keskustelu: Yleinen keskustelu: Hassu bugi. Sivu ei pääty koskaan.

Ajattelin pistää yhden hauskan esimerkin CSS:n vaaroista. Mene FireFoxilla tai Operalla sivulle:
http://www.ramk.fi/
Kavenna ikkunaa niin paljon, että alareunan vierityspalkki tulee näkyviin. Nyt alat scrollaamaan sivua pystysuunnassa alaspäin. Sivu ei pääty koskaan :) Johtuu varmaan tuosta alavalikosta, jonka pitäisi näkyä aina tuolla alareunassa, mutta jonka vierityspalkki peittää kun se ilmestyy näkyviin.

EterAnal kirjoitti:

Nyt alat scrollaamaan sivua pystysuunnassa alaspäin. Sivu ei pääty koskaan :)

Minäkin sain tollasen kerran aikaan, tosin IE:lle, ja hurjan purkkailun tuloksena. Veikeää kieltämättä :)

EterAnal kirjoitti:

Johtuu varmaan tuosta alavalikosta, jonka pitäisi näkyä aina tuolla alareunassa, mutta jonka vierityspalkki peittää kun se ilmestyy näkyviin.

Näin minäkin veikkaisin. Ja CSS:llähän tuossa on silloin hyvin vähän tekemistä, tuo palkki kun pysyy alalaidassa Javaskriptin voimin ;)
(CSS:n position: fixed; ajaisi saman asian, vieläpä sulavammin, mutta IE ei osaa sitä.)

Ja nyt sitten testaamaan että miten isoksi tuo vierityspalkki voi kasvaa, ennenkuin systeemi menee aivan sekaisin. Tällä tarkoitan käyttistä tai ohjelmaa, että kumpi sekoaa ensin..

-Grey-

lainaus:

käyttistä tai ohjelmaa, että kumpi sekoaa ensin..

Ei siinä kumpikaan hajoa :P. Ei tuo mitään muistia vaadi jos vierintäpalkki kasvaa kun kerta sisältö ei kasva.

rndprogy kirjoitti:

Ei tuo mitään muistia vaadi jos vierintäpalkki kasvaa kun kerta sisältö ei muutu :P

Ei ehkä muistia, mutta vierityspalkin koko saattaisi tallentua johonkin muuttujaan. Aivan 100% varma en ole, mutta kannattaa silti kokeilla ja katsoa mitä tapahtuu. Rullahiiri automaattivierityksellä on hyvä kapine testaukseen..

-Grey-

Grey kirjoitti:

Ei ehkä muistia, mutta vierityspalkin koko saattaisi tallentua johonkin muuttujaan. Aivan 100% varma en ole, mutta kannattaa silti kokeilla ja katsoa mitä tapahtuu. Rullahiiri automaattivierityksellä on hyvä kapine testaukseen..

Mä painoin n. 5 min hissin alanuolta, eikä se bugannut. Pitäis varmaan olla sitkeempi.

Jätä joku sopivan painava asine napin päälle ja meen kahvil. :D Enkyllä ooo kokeillu :/

Jooh, ihan vakiona pysyy muistinkulutus, vaikka kuinka vierittää.

No muistia tuskin kuluu sen enempää, mutta kyllä siellä joku muuttuja täytyy olla, joka pitää lukua siitä, kuinka "pitkä" sivu on(ihan sen palkinkin takia) ja jos tämä luku menee liian suureksi niin todennäköisesti vähintään ohjelma tilettää. Tietty voi hyvinkin olla, että mahdollinen ylitys on otettu huomioon käyttiksen puolesta, ei kuitenkaan välttämättä.

Tosin, jos tuo muuttuja on 32-bittinen positiivinen kokonaisluku, tuohon voi mennä melko kauan :)

Mitkä ihmeen CSS:n vaarat? JavaScriptillä tuo on tehty eikä CSS:llä. Minulla on NoScript-laajennus ja vähän aikaa ihmettelin, että mitä erikoista tässä on. Sitten hoksasin laittaa sivun JavaScriptin päälle. Siinä se bugi on: JavaScriptillä sijoitetaan elementti aina vähän ylitse sivun alalaidan :)

(Muoks: jaha, olihan tuolla ylempänä sittenkin javascript jo mainittu; etsin sivulta vaan hakusanalla javascript, en javaskript)

Oletetaan 32-bittinen kokonaisluku yksikkönään pikselit, niin sillä vauhdilla, jonka minä nyt sain aikaan, olisi luvassa noin 4,5 kuukauden vieritysurakka.

Minä en edes rupea kokeilemaan, 64-bit selaimella saa vierittää piiiiitkäään ;D

Moro,

Pahoittelen jos sekoitin CSS:n ja JavaScriptin toiminnallisuudet, mutta no, pointti kuitenkin tuli selväksi :)

On ne ohjelmoimia henkeen ja vereen kun ensimmäiseksi aletaan miettimään sitä "maagista" muistinkulutusta ja siitä seuraavaa mahdollista Big Bangia ;)

Mulle tuo oli vain hauska bugi joukossa muiden. Itseasiassa nyt kun on näitä selaimia useampikin koneella niin on mielenkiintoista käydä jollain "gurujen" sivuilla ja testata miten niiden sivut toimii milläkin selaimella. Esim.
http://www.infocraft.com/css/infocraft.css sivut väittivät menevänsä läpi validaattoreista ja kun validoin sivut CSS-validaattorilla niin eipäs menneetkään. Ei muuta kuin heti kirjoittamaan palautetta :)

Sitten sama homma sivuilla: http://www.TJKDesign.com. Siellä taas ongelmia aiheutti IE-selain.

Pitäkäähän pojat hauskaa:

<html><head><title>Testi</title><style type="text/css">
* { margin : 0; padding : 0; }
div#test,div#test2 {
	background : black;
	color : white;
	height : 71582788px;
	margin : 71582788px 0;
	position : relative;
	top : 71582788px;
	width : 71582788px;
}
</style></head><body>
<div id="test">OMG</div>
<div id="test2">OMG 2</div>
</body></html>

Tuo 71582788px oli suurin arvo, minkä Gecko sulatti heightille. Firefox 1.5 ei ihan pysy enää hommassa mukana. Opera 9 taitaa melkein saada tuon kohdalleen, elementtien väliin taitaa vaan jäädä aivan liian vähän välimatkaa.

Niin, siitä vaan lisäilemään elementtien määrää! Skrolli ei selkeästi vielä noin vähästä mene sekaisin.

Opera 9:n muuten voi kaataa sillä, että laittaa linkkiin http:// ja sitten 500 000 kappaletta mitä tahansa merkkiä. Tulee puskuriylivuoto.

Muoksis!
Opera 9:ssä elementin suurin korkeus voi olla 134217728 pikseliä. IE6:ssa raja on sama kuin Operassa.

Eli siis heksana Opera kestää 8000000 ja Gecko kestää 4444444. Sitten vaan useampia täyskorkuisia elementtejä kokeilemaan.

Ja joo, väsäsin ihan JavaScriptillä koodin, joka selvitti tuon maksimikoon.

Hirveessä krapulassa tuon sivun scrollailu on ihan kelpo hupia. Kunhan vaan pyörittelee hiiren rullaa ja lallattelee.