heinetz: URL mit Hashtag verändert Layout

Hallo Forum,

ich habe mich vor ein paar Tagen damit auseinandergesetzt, wie ich Boxen zu schrägen Linien verhelfen kann. Dank Eurer Hilfe habe ich dann mehrere Möglichkeiten kennen gelernt und mich dann erstmal für diese hier entschieden.

Nun beobachte ich ein Phänomen, zu dem ich überhaupt keine Idee habe (???)

Auf der Seite gibt es im Menü Sprungmarken. Wenn ich per Click auf domain.org/#Sprungmarke zu dem Element in der ID #Sprungmarke springe, verändert das das Layout.

Ganz konkret geht folgender Wert verloren:

div::after
{
	padding-top: 10.5%; /* 100% * sin(6deg) */
}

Nachdem die Seite (mit dem zerstörten Layout) über domain.org/#Sprungmarke geladen wurde und ich dann mit Firebug den Selector lösche oder den Wert verändere und dann wieder auf den Ausgangswert setze, ist das Layout wieder ok.

Ich habe keine Ahnung, was das sein kann und wo ich anfangen soll zu suchen.

Hat da jemand eine Idee?

1000dank für Tipps und beste gruesse, heinetz

Nachtrag: Das Verhalten ist mit Firefox und Safari identisch!

  1. Hallo Forum,

    ich das mal nachgebaut:

    http://jsfiddle.net/S4GzK/18/

    Was passiert ist folgendes:

    Den Link "GoToSection" führt zu #Example. Wenn man ihn klickt verliert:

    .jumbotron::before, .jumbotron::after {
        padding-top: 13.4505%; 
    }
    

    … seine Wirkung. Einmal mit Firefox den Selektor deaktiviert und dann wieder aktiviert ist er wieder da.

    beste gruesse, heinetz