Jiggling type after slide show transition in Firefox 4

HTML & CSS
1

Hello all,

Have this interesting but pain in the butt bug on this page in Firefox 4:

http://test1.chuprinastudios.com/test.php

In Firefox 4(OSX 10.6.5) please note the type beneath the slideshow, upon a image transition there seems to be a bit of a jump in the type. In Firefox 3.6.1x(OSX 10.6.5)the jump/wobble does not appear to be there. The results seem to be the same in Windows 7. In Chrome it does not have the issue.

I have tried separating the slide show by another div, rotating the image in Photoshop and not in css. Nothing seems to work so far.

Any reason why Firefox 4.0 would only be doing this? Any advice, reasons, work arounds, direction, answers would be greatly appreciated.

PChuprina

2

When does the jump occur?

I didn’t see a transition taking place.

3

Actually, if you remove the slideshow div, the problem disappears.

I see some dotted lines too, beside the blurry rendering of the text.

4

Hi, sorry i didn’t make myself clear.

I meant the image transitions in the slide show. The descriptive text underneath jumps just a bit and settles back during the image fade in and outs.

PChuprina

5

noonnope: The slideshow div actually contains the slideshow…

6

Ok, I see small movement in the text below the transition now.

I’ve only tested using Firebug but it seems the jump stops if you remove the transition from the body_content element and apply it to individual elements instead.

e.g.


@charset "UTF-8";
/* CSS Document */

/*CSS *libraries**/
@import url("reset.css");
 @font-face {
 font-family: 'ArchitectsDaughterRegular';
 src: url('../fonts/architectsdaughter-webfont.eot');
 src: url('../fonts/architectsdaughter-webfont.eot?iefix') format('eot'),  url('../fonts/architectsdaughter-webfont.woff') format('woff'),  url('../fonts/architectsdaughter-webfont.ttf') format('truetype'),  url('../fonts/architectsdaughter-webfont.svg#webfont3LMaigq5') format('svg');
 font-weight: normal;
 font-style: normal;
}
body {
    background-color: #000;
}
#main {
    /* The main container */
    background-image:  url(../images/bkgrd2.jpg);
    background-repeat:no-repeat;
    background-position:  center;
    margin:  auto;
    margin-top:   0px;
    width:1240px;
    height:1000px;
    position:  relative;
    z-index: 100;
}
.title {
    width:  781px;
    height:  117px;
    margin-left:  131px;
    padding-top:  65px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
div#body_content {
    /*border:  solid red 1px;*/
    height: 577px;
    width:  950px;
    margin-top:  -5px;
    margin-left:  130px;
}
.nav {
    float:  left;
    width:  233px;
    height:  450px;
    margin-top:  -325px;
    margin-left:  38px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
.navb {
    float:  left;
    width:  233px;
    height:  450px;
    margin-top:  16px;
    margin-left:  30px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
.nav ul li, .navb ul li {
    list-style:  none;
}
#homeb, #web_designb, #photographyb, #blogb, #print_storeb, #client_servicesb, #contactb, #aboutb, #resumeb {
    display: block;
    width: 210px;
    height: 30px;
    margin-top:  10px;
    margin-left:  -16px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
/*everyday items about button hover*/
#homeb:hover, #web_designb:hover, #photographyb:hover, #blogb:hover, #print_storeb:hover, #client_servicesb:hover, #contactb:hover, #aboutb:hover, #resumeb:hover {
    background-position: 0 -30px;
}
#homeb {
    background: url(../images/homeb.png) no-repeat;
}
#web_designb {
    background: url(../images/web_desb.png) no-repeat;
}
#photographyb {
    background: url(../images/photographyb.png) no-repeat;
}
#blogb {
    background: url(../images/blogb.png) no-repeat;
}
#print_storeb {
    background: url(../images/print_storeb.png) no-repeat;
}
#client_servicesb {
    background: url(../images/client_servicesb.png) no-repeat;
}
#contactb {
    background: url(../images/contactb.png) no-repeat;
}
#aboutb {
    background: url(../images/aboutb.png) no-repeat;
}
#resumeb {
    background: url(../images/resumeb.png) no-repeat;
}
img.vert_linec, div.vert_linec {
    margin-top:  -346px;
    width:2px;
}
img.vert_lined {
    position:  absolute;
    top:  0px;
}
#gallery {
    float:  right;
    width: 680px;
    height:  425px;
    margin-top: -450px;
    margin-right:  25px;
    position:  relative;
    z-index:  200;
}
#galleryb {
    float:  right;
    width: 685px;
    height:  425px;
    margin-top: -450px;
    margin-right:  25px;
    position:  relative;
    z-index:  50;
}
#galleryc {
    float:  right;
    width: 685px;
    height:  425px;
    margin-right:  25px;
    margin-top: -450px;
    position:  relative;
    z-index:  50;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
div#slideshow {
    height:  330px;
    width:  480px;
    margin-left:  112px;
    margin-top:  14px;
}
div#slideshowc {
    height:  353px;
    width:  360px;
    position:  absolute;
    left:  172px;
    top:  0px;
    -moz-transform: rotate(1.5deg);  /* FF3.5+ */
    -o-transform: rotate(1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(1.5deg);  /* IE9 */
    transform: rotate(1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=-0.02617694830787315, M21=0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
div#soligsoft_words {
    width:  620px;
    height:  70px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing:  1px;
    line-height:  140%;
    position: absolute;
    left:  30px;
    top:  377px;
    z-index:  350;
}
.soligsoft_site {
    margin-top:  2px;
}
.soligsoft_siteb {
    font-weight:  bold;
}
.drop-box {
    /* The share box */
    width:325px;
    height:300px;
    position:  relative;
    margin-left:  745px;
    margin-top:  340px;
    z-index: 300;
    background-image:  url(../images/coffee.png);
    background-repeat:  no-repeat;
}
.drop-boxb {
    /* The share box */
    width:325px;
    height:300px;
    position:  relative;
    margin-left:  485px;
    margin-top:  -100px;
    z-index: 300;
    background-image:  url(../images/coffee.png);
    background-repeat:  no-repeat;
}
.drop-boxc {
    /* The share box */
    width:325px;
    height:300px;
    position:  relative;
    margin-left:  470px;
    margin-top:  340px;
    z-index: 300;
    background-image:  url(../images/coffee.png);
    background-repeat:  no-repeat;
}
.pic, .pic a {
    /* Each picture and the hyperlink inside it */
    width:200px;
    height:200px;
    overflow:hidden;
}
.pic {
    /* Styles specific to the pic class */
    position:absolute;
    border:5px solid #EEEEEE;
    border-bottom:5px solid #eeeeee;
    z-index:  600;
    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}
.pic a {
    /* Specific styles for the hyperlinks */
    text-indent:-999px;
    display:block;/* Setting display to block enables advanced styling for links */
}
label, input {
    /* The modal dialog URL field */
    display:block;
    padding:3px;
}
label {
    font-size:10px;
}
fieldset {
    border:0;
    margin-top:10px;
}
#url {
    /* The URL field */
    width:240px;
}
div#thumbnails {
    width: 700px;
    height:  430px;
    margin-left: 0px;
    margin-top:  -405px;
}
.table {
    width:  680px;
    height:  335px;
    border-spacing:  10px;
    margin-left:  30px;
    margin-top:  20px;
}
.table a.thumbs img {
    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}
.pwork img {
    -moz-transform: rotate(4deg);  /* FF3.5+ */
    -o-transform: rotate(4deg);  /* Opera 10.5 */
    -webkit-transform: rotate(4deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(4deg);  /* IE9 */
    transform: rotate(4deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242, sizingMethod='auto expand');
    zoom: 1;
}
div#webdesign_words {
    width:  620px;
    height:  70px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing:  1px;
    margin-top:  -80px;
    margin-left:  30px;
    position:  relative;
    z-index:  250;
}
p.webdesign_wordsb {
    line-height:  140%;
}
div#footer {
    clear:  both;
    /*border:  solid yellow 1px;*/
    width:  920px;
    height:  90px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing: 1px;
    top:  130px;
    left:  30px;
    position:  absolute;
    z-index:  20;
}
div#footerb {
    clear:  both;
    /*border:  solid yellow 1px;*/
    width:  920px;
    height:  90px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing: 1px;
    top:  460px;
    left:  -223px;
    position:  absolute;
    z-index:  20;
}
.studio_name {
    font-size:  14px;
    font-weight: bold;
    margin-bottom:  10px;
}
.smallcaps, .smallcaps2 {
    font-size:  12px;
}
p.phone {
    margin-top:  4px;
}
p.email {
    width:  190px;
    margin-top:  10px;
}
p.email a {
    margin-top:  10px;
    text-decoration:  none;
    color:  #000;/*border:  solid blue 1px;*/
}
p.email a:hover {
    margin-top:  10px;
    color:  #666;/*border:  solid green 1px;*/
}
.map {
    float:right;
    margin-right:  290px;
    margin-top:  -75px;
}
.map ul {
 font-family: font-family:  'Reenie Beanie', serif;
    font-size:  12px;
    width:  233px;
    background : transparent;
}
.map ul li {
    list-style:  none;
    margin-top:  3;
}
.map ul li a {
 font-family: font-family:  'Reenie Beanie', serif;
    text-decoration : none;
    line-height:  115%;
    color:  #000;
}
.map ul li a:hover {
    color:  #666;
}
.socialb {
    float:  right;
    width:  100px;
    height:  90px;
    margin-right:  -325px;
    margin-top:  -75px;
}
img.twitter {
    margin-left:  10px;
}
img.linkedin {
    margin-top:  10px;
}
.pencil {
    position:  absolute;
    z-index:  100;
    top:  735px;
    left:  25px;
}
.pencilb {
    position:  absolute;
    z-index:  100;
    top:  540px;
    left:  -165px;
}

Worth a try :slight_smile:

7

Whoa, thank you.

The was actually my next idea, unfortunately I had to leave the project for a clients needs(a new html email). Thanks again, will try first thing tomorrow and of course let you know.

PChuprina

8

:lol: Obviously. I was just experimenting and sharing.

9

Hi Paul,

Unfortunately your work around didn’t work(sigh). Really not sure which way to go now. Could it be a issue of cross slide? Is it something inherent with Firefox 4.0(audible sigh)?

PChuprina

10

Hi Paul,

The code you supplied got me thinking, again thank you very much.

To solve the problem I removed the rotate code from “div#galleryc” squaring it off. I then removed it from “div#slideshowc.” I then added the rotation to
“div#soligsoft_words.” it seems to work in firefox4.

Result can be seen at: ChuprinaCreative

Remaining issue is angling the thin vertical line. Thanks again!

PChuprina

@charset "UTF-8";
/* CSS Document */

/*CSS *libraries**/
@import url("reset.css");
 @font-face {
 font-family: 'ArchitectsDaughterRegular';
 src: url('../fonts/architectsdaughter-webfont.eot');
 src: url('../fonts/architectsdaughter-webfont.eot?iefix') format('eot'),  url('../fonts/architectsdaughter-webfont.woff') format('woff'),  url('../fonts/architectsdaughter-webfont.ttf') format('truetype'),  url('../fonts/architectsdaughter-webfont.svg#webfont3LMaigq5') format('svg');
 font-weight: normal;
 font-style: normal;
}
body {
    background-color: #000;
}
#main {
    /* The main container */
    background-image:  url(../images/bkgrd2.jpg);
    background-repeat:no-repeat;
    background-position:  center;
    margin:  auto;
    margin-top:   0px;
    width:1240px;
    height:1000px;
    position:  relative;
    z-index: 100;
}
.title {
    width:  781px;
    height:  117px;
    margin-left:  131px;
    padding-top:  65px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
div#body_content {
    /*border:  solid red 1px;*/
    height: 577px;
    width:  950px;
    margin-top:  -5px;
    margin-left:  130px;
}
.nav {
    float:  left;
    width:  233px;
    height:  450px;
    margin-top:  -325px;
    margin-left:  38px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
.navb {
    float:  left;
    width:  233px;
    height:  450px;
    margin-top:  16px;
    margin-left:  30px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
.nav ul li, .navb ul li {
    list-style:  none;
}
#homeb, #web_designb, #photographyb, #blogb, #print_storeb, #client_servicesb, #contactb, #aboutb, #resumeb {
    display: block;
    width: 210px;
    height: 30px;
    margin-top:  10px;
    margin-left:  -16px;
    -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
    -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(-1.5deg);  /* IE9 */
    transform: rotate(-1.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
    zoom: 1;
}
/*everyday items about button hover*/
#homeb:hover, #web_designb:hover, #photographyb:hover, #blogb:hover, #print_storeb:hover, #client_servicesb:hover, #contactb:hover, #aboutb:hover, #resumeb:hover {
    background-position: 0 -30px;
}
#homeb {
    background: url(../images/homeb.png) no-repeat;
}
#web_designb {
    background: url(../images/web_desb.png) no-repeat;
}
#photographyb {
    background: url(../images/photographyb.png) no-repeat;
}
#blogb {
    background: url(../images/blogb.png) no-repeat;
}
#print_storeb {
    background: url(../images/print_storeb.png) no-repeat;
}
#client_servicesb {
    background: url(../images/client_servicesb.png) no-repeat;
}
#contactb {
    background: url(../images/contactb.png) no-repeat;
}
#aboutb {
    background: url(../images/aboutb.png) no-repeat;
}
#resumeb {
    background: url(../images/resumeb.png) no-repeat;
}
img.vert_linec, div.vert_linec {
    margin-top:  -346px;
    width:2px;
}
img.vert_lined {
    position:  absolute;
    top:  0px;
}
#gallery {
    float:  right;
    width: 680px;
    height:  425px;
    margin-top: -450px;
    margin-right:  25px;
    position:  relative;
    z-index:  200;
}
#galleryb {
    float:  right;
    width: 685px;
    height:  425px;
    margin-top: -450px;
    margin-right:  25px;
    position:  relative;
    z-index:  50;
}
#galleryc {
    float:  right;
    width: 685px;
    height:  425px;
    margin-right:  25px;
    margin-top: -450px;
    position:  relative;
    z-index:  50;
}
div#slideshow {
    height:  330px;
    width:  480px;
    margin-left:  112px;
    margin-top:  14px;
}
div#slideshowc {
    height:  353px;
    width:  360px;
    position:  absolute;
    left:  172px;
    top:  0px;
}
div#soligsoft_words {
    width:  620px;
    height:  70px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing:  1px;
    line-height:  140%;
    position: absolute;
    left:  30px;
    top:  377px;
    z-index:  350;
}
.soligsoft_site {
    margin-top:  2px;
}
.soligsoft_siteb {
    font-weight:  bold;
}
.drop-box {
    /* The share box */
    width:325px;
    height:300px;
    position:  relative;
    margin-left:  745px;
    margin-top:  340px;
    z-index: 300;
    background-image:  url(../images/coffee.png);
    background-repeat:  no-repeat;
}
.drop-boxb {
    /* The share box */
    width:325px;
    height:300px;
    position:  relative;
    margin-left:  485px;
    margin-top:  -100px;
    z-index: 300;
    background-image:  url(../images/coffee.png);
    background-repeat:  no-repeat;
}
.drop-boxc {
    /* The share box */
    width:325px;
    height:300px;
    position:  relative;
    margin-left:  470px;
    margin-top:  340px;
    z-index: 300;
    background-image:  url(../images/coffee.png);
    background-repeat:  no-repeat;
}
.pic, .pic a {
    /* Each picture and the hyperlink inside it */
    width:200px;
    height:200px;
    overflow:hidden;
}
.pic {
    /* Styles specific to the pic class */
    position:absolute;
    border:5px solid #EEEEEE;
    border-bottom:5px solid #eeeeee;
    z-index:  600;
    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}
.pic a {
    /* Specific styles for the hyperlinks */
    text-indent:-999px;
    display:block;/* Setting display to block enables advanced styling for links */
}
label, input {
    /* The modal dialog URL field */
    display:block;
    padding:3px;
}
label {
    font-size:10px;
}
fieldset {
    border:0;
    margin-top:10px;
}
#url {
    /* The URL field */
    width:240px;
}
div#thumbnails {
    width: 700px;
    height:  430px;
    margin-left: 0px;
    margin-top:  -405px;
}
.table {
    width:  680px;
    height:  335px;
    border-spacing:  10px;
    margin-left:  30px;
    margin-top:  20px;
}
.table a.thumbs img {
    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}
.pwork img {
    -moz-transform: rotate(4deg);  /* FF3.5+ */
    -o-transform: rotate(4deg);  /* Opera 10.5 */
    -webkit-transform: rotate(4deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(4deg);  /* IE9 */
    transform: rotate(4deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
 M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242, sizingMethod='auto expand');
    zoom: 1;
}
div#webdesign_words {
    width:  620px;
    height:  70px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing:  1px;
    margin-top:  -80px;
    margin-left:  30px;
    position:  relative;
    z-index:  250;
}
p.webdesign_wordsb {
    line-height:  140%;
}
div#footer {
    clear:  both;
    /*border:  solid yellow 1px;*/
    width:  920px;
    height:  90px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing: 1px;
    top:  130px;
    left:  30px;
    position:  absolute;
    z-index:  20;
}
div#footerb {
    clear:  both;
    /*border:  solid yellow 1px;*/
    width:  920px;
    height:  90px;
    font-family:  ArchitectsDaughterRegular, serif;
    font-size:  12px;
    letter-spacing: 1px;
    top:  460px;
    left:  -223px;
    position:  absolute;
    z-index:  20;
}
.studio_name {
    font-size:  14px;
    font-weight: bold;
    margin-bottom:  10px;
}
.smallcaps, .smallcaps2 {
    font-size:  12px;
}
p.phone {
    margin-top:  4px;
}
p.email {
    width:  190px;
    margin-top:  10px;
}
p.email a {
    margin-top:  10px;
    text-decoration:  none;
    color:  #000;/*border:  solid blue 1px;*/
}
p.email a:hover {
    margin-top:  10px;
    color:  #666;/*border:  solid green 1px;*/
}
.map {
    float:right;
    margin-right:  290px;
    margin-top:  -75px;
}
.map ul {
 font-family: font-family:  'Reenie Beanie', serif;
    font-size:  12px;
    width:  233px;
    background : transparent;
}
.map ul li {
    list-style:  none;
    margin-top:  3;
}
.map ul li a {
 font-family: font-family:  'Reenie Beanie', serif;
    text-decoration : none;
    line-height:  115%;
    color:  #000;
}
.map ul li a:hover {
    color:  #666;
}
.socialb {
    float:  right;
    width:  100px;
    height:  90px;
    margin-right:  -325px;
    margin-top:  -75px;
}
img.twitter {
    margin-left:  10px;
}
img.linkedin {
    margin-top:  10px;
}
.pencil {
    position:  absolute;
    z-index:  100;
    top:  735px;
    left:  25px;
}
.pencilb {
    position:  absolute;
    z-index:  100;
    top:  540px;
    left:  -165px;
}
11

Maybe if the area is a fixed height then you can absolutely position the blue line underneath so that you aren’t interfering with the other elements.

I think the problem is that if the transition occurs within an area that has been rotated then all elements within that area need to be re-drawn and hence the jump.