1

http://oliveid.com/

If you go to this site you can see what I'm talking about. The logo image shifts slightly whenever the backstretch background image fades. Can't figure out what causes this. I'm viewing it through the latest firefox browser. If I apply fixed position to the backstretch div, it solves that issues, but then it's fixed on the site, so you can't see the other content once you scroll down.

What is this problem called? I couldn't thoroughly search for similar questions, because I didn't what keywords would bring this up. Thank you for any advice!

koo
  • 11
  • 1
  • It's not just the image. If you put your hand over the image to cover it, you will also notice the bottom half of the background is stretching as well. – SimplyAzuma Apr 15 '14 at 17:56
  • Also, if you were to slow the animation of the "Backstretch" div to about one change every 30 seconds - 1 minute I could try to troubleshoot it for you. – SimplyAzuma Apr 15 '14 at 18:02
  • I changed the timing. Not sure what you mean by bottom half of the background is stretching. The issues doesn't seem to happen in safari, is it a firefox thing? any way to solve this? – koo Apr 15 '14 at 18:19
  • I've had issues with transparent PNG's and animation in firefox before. It was actually very similar, I never did fix it and cant seem to find a solution for your issue unfortunately. – SimplyAzuma Apr 15 '14 at 18:59
  • check my answer and let me know. If it works, feel free to accept it as the correct one. :) – SimplyAzuma Apr 15 '14 at 19:05

1 Answers1

0

I have found a solution for the firefox issue! I'm not sure why this fixes it, or even how, but I know it fixes it in firefox.

In bootstrap.css on line 206 change line-height:20px; to line-height:100px;. I'm not sure if this will affect anything else on your site, so you may have to tweak some other things, but this seems to solve the issue. :)

SimplyAzuma
  • 25,214
  • 3
  • 23
  • 39
  • Thank you, I added that to the body and it seems to help, but it still jerks alittle. hmmm. Any other suggestions? – koo Apr 15 '14 at 19:23
  • In firefox it looks perfectly fine as your question was asking. I don't see any movement from the logo at all. Did I not solve your problem in firefox? or are you having trouble with another browser? Also, you can try increasing the `line-height` more to see if that helps. – SimplyAzuma Apr 15 '14 at 19:41
  • I changed the line-height, but it still looks like the logo is growing about 1px when the background fades and then goes back to normal one the fade is over. – koo Apr 15 '14 at 20:35