Image Issues with my CSS

HTML & CSS
1

Hey guys,

Having an issue with an image on my page… Here is the link…

http://modocom.ca/wordpress/

You’ll notice it loads but then right when you start to scroll down it the Lowery’s logo and image just have a sudden glitch just small but jumps is this because the positioning is not the same on the CSS as Javascript?

If so, where exactly can I make this fix.

Thanks,

Mike

2

I don’t see a problem. How many browsers have you tested this in? (Or what browser is the problem happening in?)

3

Having the problem in Firefox and Chrome.

If you go to the page you can notice in Chrome the image of Lowerys logo is cut off a bit then when you begin to scroll you’ll notice the Lowerys logo jumps down a bit and the background image of the purple dudes shifts to the left a bit, just need to fix this so it doesnt appear to jump.

Thanks

4

Anyone have a chance to take a peek at this :slight_smile:

5 

#story-lowerys .bg {
    background: url("../../images/lowerys-logo.png") no-repeat fixed 50% 190px;
    height: 1600px;
    left: 100px;
    position: absolute;
    top: 0;
    width: 1600px;
}

#story-lowerys {
    background: url("../../images/bg_2.jpg") no-repeat fixed 50% 0;
    height: 1600px;
    margin: 0;
    overflow: hidden;
    width: 100%;
}
6

I’ve no idea what’s gone wrong with the above post but I can’t seem to edit it correctly at all :slight_smile:

It should have said “Try changing the starting background-positions to this”.

7

Perfect that worked…

Do you notice a little jump vertically as well, like by 50px or so it appears… Is that one an easy fix as well just so it all flows smoothly instead of the jump on initial scroll.

Thanks man your a genius!!!

Mike

8

Hi,

The 190px was to stop the vertical jump. I only see about a 5px jump now so just adjust that 190px a bit. Unless you meant something else.

9

Ok I did this and fixed the background jumping as well… But noticed one other issue in Chrome sometimes the Lowerys logo when you load the page half cut off for some reason sometimes the top of it doesnt show, any way to fix this?

Thanks,

Mike

10

Hi,

It looks like a rendering bug in chrome and I’m not sure there is a real fix for it.

I can tell you the cause and you may be able to work around it. The trigger is the position:relative in .story and you can test this by adding position:static here:

style=“position:static”


<section class="story" style="position:static" id="story-lowerys" data-controller="Lowerys"  data-scrolloffset="100">
<div class="bg"></div>
</section>
<!--story-->

The nested element .bg is placed absolutely but you may be able to getaway without a stacking context if you avoid using co-ordinates and instead use margins to move it around (I tested locally and the left:100px didn;t actually seem to break it but I wasn’t working with the full site).

Hopefully that will give you something to try anyway.