[HTML/JS] Firefox legend bug detecteren

[steve2507]

Het probleem
Zoals misschien wel bekend zit er in firefox al tijden een bug die het absoluut positioneren van legend elementen binnen fieldsets er niet makkelijker op maakt. Een oplossing zou zijn om een span binnen de legend te plaatsen, maar dan blijft het probleem bestaan dat de padding van het fieldset element wordt meegenomen bij het absoluut positioneren van de legend>span.
Daarnaast vervuilt die span de opmaak, dus die voeg ik liever dynamisch toe.

De berekening voor het positioneren zou als volgt moeten zijn bij legend.style.bottom=0:

JavaScript:

legend.offsetTop=fieldset.offsetHeight-legend.offsetHeight

Maar firefox lijkt er dit van te maken:

JavaScript:

legend.offsetTop=fieldset.offsetHeight-legend.offsetHeight+fieldset.padding

Oplossing?
Ik dacht slim te zijn door een stukje javascript te schrijven wat de positie van het legend element ophaalt, en aan de hand daarvan checked of de positie wel of niet correct is. Wat blijkt: de opgegeven waardes voor offsetTop kloppen wel, en komen daarmee dus niet overeen met de daadwerkelijk gerenderde positie.

Testcase
Dit is hier te zien: http://yourboard.nl/tmp/test.htm
In de textbox kan je de padding van het fieldset element opgeven. Zet er bijvoorbeeld 50 in, en vergelijk firefox eens met opera/chrome/safari. Het verschil moge duidelijk zijn. Interessanter is echter, dat de waardes voor offset & de boudingclientrect wel de goede waardes zijn. Ik kan daarom dus niet detecteren of de legends correct zijn gerendered of niet.

De vraag
Heeft iemand enig idee hoe ik dit zonder gebruik van browser detects kan oplossen?

[Sebazzz]

In IE8 collapsed heel de fieldset naar de grootte van de legend, en in IE7 is de boel daarnaast ook nog helemaal vervormd. Dus Firefox is niet het grootste probleem. Waarom zou je overigens een legend absoluut willen positioneren?

[MueR]

Voor zover ik weet is dat geen bug in firefox, maar volgens spec. Legend is naar mijn weten in geen enkele browser te positioneren of als block te renderen.

Wat je als alternatief kan doen is het plaatsen van een span oid binnen je legend. Deze kan je middels relative positioning op de legend wel absoluut positioneren. Een ander alternatief is middels javascript een <hX> tag toe te voegen na een legend en de legend te hiden.

[ Voor 46% gewijzigd door MueR op 20-04-2010 11:45 ]

[steve2507]

@Sebazzz: de problemen met IE zijn dmv javascript makkelijk omheen te werken, omdat ik met conditional comments de IE versies kan detecteren. Dat is overigens reeds gedaan op de site waar het om draait, het gaat mij nu puur en alleen om dit probleem in firefox.

@MueR: Het gaat wel degelijk om een bug, ééntje die zich verder strekt dan alleen het legend element overigens: https://bugzilla.mozilla.org/show_bug.cgi?id=450418
Daarnaast kan je zien dat het renderen hiervan wel correct gaat in browsers als Opera/Chrome. En de foutief aangegeven offsetTop/offsetLeft tegenover de daadwerkelijk gerenderde positie is natuurlijk niet goed te praten.

Het alternatief dat jij aanbiedt is eenzelfde oplossing als de span binnen de legend een andere positie geven.


Even voor de duidelijkheid: het gaat hier niet om het oplossen van de misplaatste legend, maar om te kunnen detecteren dat het element misplaatst is.

[ Voor 20% gewijzigd door steve2507 op 20-04-2010 15:01 ]

[pieturp]

Soms, dit is zo'n voorbeeld, denk ik echt: "F*ck dat!".

...en dan schrijf ik wél die legend, maar toon ik hem niet. Zet gewoon een h?, span, div of whatever in de HTML om de boel werkbaar te maken en een legend voor de semantiek. Dat je dan dingen inderdaad dubbel doet is overigens helemaal waar en echt een voldaan gevoel heb ik dan ook niet...

Edit: Wat bedoel je nou eigenlijk met "het gaat hier niet om het oplossen van de misplaatste legend, maar om te kunnen detecteren dat het element misplaatst is."? Laat ik specifieker (en nieuwsgieriger) zijn: Waarvoor zou je dát nou weer willen weten?

[ Voor 25% gewijzigd door pieturp op 21-04-2010 01:35 ]

[R4gnax]

steve2507 schreef op dinsdag 20 april 2010 @ 14:58:
@Sebazzz: de problemen met IE zijn dmv javascript makkelijk omheen te werken, omdat ik met conditional comments de IE versies kan detecteren. Dat is overigens reeds gedaan op de site waar het om draait, het gaat mij nu puur en alleen om dit probleem in firefox.

Je kunt Firefox (of liever gezegd: Gecko) 'detecteren' in CSS met een trucje en dan met negatieve margins of gewijzigde positionering dit probleem oplossen.

Cascading Stylesheet:

fieldset
{
 position: relative;
 padding: 10px;
}

legend span
{
  position: absolute;
  top: 10px;
  left: 10px;
}

legend span, x:-moz-any-link
{
  margin-left: -20px;
  margin-top: -20px;
}

Een CSS regel mag dan en slechts dan toegepast worden als alle leden door de user agent herkend worden. Alleen Gecko herkent de :-moz-any-link pseudo-selector en past de laatste regel toe. Dit heeft verder geen neven-effecten, aangezien x een element is wat in HTML niet bestaat en de regel dus niet op extra elementen toegepast gaat worden.

Werkt voor Gecko 1.8 en hoger (dus sinds Firefox 2).

[steve2507]

@pieturp: de oplossing voor de positionering is me wel bekend, maar die implementeer ik momenteel adhv een browser detect. Het punt is echter, dat als dit in de toekomst gefixed gaat worden in ff, en dat zal wel, dan zal het workaround-script nog immer zijn werk proberen te doen. En dat is natuurlijk niet de bedoeling.

@R4gnax: die kende ik nog niet, interessant. Maar ik loop daarmee nogsteeds tegen het probleem aan dat als dit probleem in firefox wordt opgelost, deze CSS alsnog toegepast wordt.
Daarnaast stip je wel nog een fijn punt aan: er zijn ook andere browsers die gebruik maken van de Gecko engine, wat een browser detect nog minder bruikbaar maakt. Of ik moet maar op Gecko versie gaan checken...


Het enige wat ik nu kan bedenken is om per nog uit te rollen firefox(/gecko) versie te gaan checken of de bug er inzit. Vanaf het moment dat de bug is opgelost kan ik vervolgens checken op browser=ff(/engine=gecko) en versie is kleiner dan x.
Maar dan is er nog een ander issue: hoe betrouwbaar is de useragentstring? (Het antwoord daarop is eenieder wel bekend denk ik zo)

[MueR]

steve2507 schreef op woensdag 21 april 2010 @ 10:06:
@pieturp: de oplossing voor de positionering is me wel bekend, maar die implementeer ik momenteel adhv een browser detect. Het punt is echter, dat als dit in de toekomst gefixed gaat worden in ff, en dat zal wel, dan zal het workaround-script nog immer zijn werk proberen te doen. En dat is natuurlijk niet de bedoeling.

Dit vind ik maar een vreemde manier van werken. Je wil niet dmv css/html een oplossing maken want de bug die jou dwingt om je padding als extra -left te geven zou ooit in de toekomst wel eens gefixt kunnen worden? Zo ben je natuurlijk wel even bezig. De tijd die je ondertussen al kwijt bent aan het schrijven van een fix had je al lang klaar kunnen zijn met een werkbaar alternatief zoals door meerdere mensen aangedragen. Of zie ik het nu helemaal verkeerd en heb je een reden om al dit extra werk te gaan doen