[IE8+]Probleem / Bug met rendering icm javascript

[FaZe]

Heb een heel irritant probleem met Internet Explorer 8 (en IE9 preview). In alle andere (bekende) browsers werkt het goed.

Het probleem: Bij het klikken op een radio wordt een div verkeerd getoond. Door met de muis over een button te bewegen gaat alles verspringen, zonder dat er ook maar iets van javascript op de button zit.

De pagina is helemaal w3c validated en HTML tidy validated.

Hier de stappen om het te reproduceren (kijk eerste even in Firefox hoe het hoort):

• Open de pagina in IE8
• Klik op Start
• Klik op Hide
• Nu wordt de div verkeerd weergegeven
• Beweeg met de muis over "button" en hij komt nog slechter te staan
• Klik op Show
• Beweer weer met de muis over "button" en zie dat nu alles goed gaat vallen
• Klik op Hide
• Klik op Show
• Nu kun je bovenstaande procedure herhalen en blijft alles goed, totdat je weer op "Start" drukt.

Waar ik in geïnteresseerd ben is niet een workaround, maar om te weten waarom dit nu zo is, zodat ik het kan voorkomen en op andere plekken oplossen.

Hier de code:
*weg*
Zit er al erg lang mee te klooien en kom er nog steeds niet uit.

[ Voor 67% gewijzigd door MueR op 09-06-2010 15:36 ]

[Juup]

Linkje naar live voorbeeld?

[Bosmonster]

Ah.. er staat een lege scripttag ergens (regel 134-136), als ik die weghaal is het opgelost.

Rest maar even weggehaald, want keek blijkbaar verkeerd.

[ Voor 137% gewijzigd door Bosmonster op 09-06-2010 15:06 ]

[MueR]

Ik heb die lap code even weggehaald. Zorg voor een testcase of post enkel relevante code, niet je complete html file dumpen.

[FaZe]

Ai, mijn excuses. Ben de link inderdaad vergeten...
http://tst.dev9.nl/ie8bug8.htm

Code leek me handig voor toekomstige referentie, maar wordt inderdaad wel erg groot.

P.s. de lege scripttag had ik ook ontdekt dat het werkte om die weg te halen, maar daarmee is voor mij de oorzaak nog niet duidelijk (heb het probleem op meerdere plekken waar er geen lege script tag is

[ Voor 32% gewijzigd door FaZe op 09-06-2010 15:44 ]

[crisp]

IE (zelfs IE8) heeft wel vaker van dit soort rare problemen; kijk eens op http://www.positioniseverything.net/explorer.html hoe je bepaalde problemen het best kan proberen op te lossen. Vaak is het een kwestie van 'hasLayout' forceren op bepaalde elementen.

[Bosmonster]

crisp schreef op woensdag 09 juni 2010 @ 16:05:
IE (zelfs IE8) heeft wel vaker van dit soort rare problemen; kijk eens op http://www.positioniseverything.net/explorer.html hoe je bepaalde problemen het best kan proberen op te lossen. Vaak is het een kwestie van 'hasLayout' forceren op bepaalde elementen.

Ja dat had ik eerder ook aangegeven (maar weggehaald).

Kon me bijna niet voorstellen dat dat in IE9 preview nog steeds zou bestaan..

(en een simpele * {zoom:1} lostte het niet in zijn geheel op)

[FaZe]

hasLayout heb ik al eerder wat mee getest, maar niet het probleem bij kunnen vinden.
Ik heb die pagina bekeken met de bergen bugs, maar zag niet een vergelijkbaar iets. Welke zou het moeten zijn wat dus dingen laat verspringen?

[apokalypse]

crisp schreef op woensdag 09 juni 2010 @ 16:05:
IE (zelfs IE8) heeft wel vaker van dit soort rare problemen; kijk eens op http://www.positioniseverything.net/explorer.html hoe je bepaalde problemen het best kan proberen op te lossen. Vaak is het een kwestie van 'hasLayout' forceren op bepaalde elementen.

Ik dacht dat hasLayout niet meer bestond voor IE8

Edit: wel belooft te verwijderen, maar de bugs zijn er in ieder geval nog wel
http://jhop.me/browsers/ie8/haslayout-true

[ Voor 13% gewijzigd door apokalypse op 15-06-2010 21:08 ]

[FaZe]

Iemand een idee hoe ik dit verder op kan lossen? Heb al allerlei aanpassingen eerder doorgevoerd om de hasLayout op te lossen, al leek het daar niet aan te liggen (misschien wel, maar ik zie het niet).
Heb nog even een versie online gezet zonder de lege script tag. Hierdoor zie je niet direct meer wat er mis gaat, maar de eerste keer komt de textbox tegen de radio aan (N).
http://tst.dev9.nl/ie8bug9.htm

[ Voor 80% gewijzigd door FaZe op 15-06-2010 09:27 ]

[Verwijderd]

FaZe schreef op dinsdag 15 juni 2010 @ 09:18:
Zit er blijkbaar nog in dan. Volgens de test op die pagina zit de hasLayout ook nog in IE9 preview (eigen test).
Maar hasLayout of niet, iemand die weet hoe dit opgelost kan worden? Heb zelf al van alles gedaan en een hele berg dingen opgeschoond.

Heb je al is geprobeerd om het te forceren? Bijvoorbeeld door zoom:1 op te nemen in je css definitie?

[FaZe]

Nu wel. Zoom:1.0 op alle elementen (*) toegepast. Zou dat voldoende moeten zijn?
Hier http://tst.dev9.nl/ie8bug10.htm de aangepaste versie.

Textbox komt nog steeds de eerste keer te hoog te staan

[R4gnax]

Vervang de margins eens door padding? IE heeft nog wel eens last van margin-collapse bugs. I.h.b. wanneer je de DOM manipuleert en de pagina zich moet re-flowen. (Waarom trouwens al die clear:both regels?)

[FaZe]

Bedankt voor de reactie. Al in het begin was me ook al iets opgevallen met margin, maar het leek me dat op zo'n basis property niks geks kon zijn en heb toen niet verder gekeken.
Heb nu de margins door paddings vervangen en het lijkt inderdaad niet meer te gebeuren. Thanks!
Ga nu kijken wat ik allemaal om moet bouwen om het goed werkend te krijgen... zucht.
[droom-modus]Hoe zou het leven zijn zonder IE...;)[/droom-modus]

Zal bug http://www.inventpartners.com/content/ie8_margin_top_bug en/of http://jhop.me/ie8-bugs#listitem-margincollapse (bug 29) zijn

[ Voor 23% gewijzigd door FaZe op 16-06-2010 17:47 . Reden: Bug links toegevoegd ]