HELP! Image on iOS stretches when scrolling - something wrong with my HTML/CSS?

Hi, i hope someone can help as i’m beginning to lose my mind!!

I have a hamburger menu image that i’m using on my website, which once clicked it expands to show the menu. This all works fine across all browsers and devices. However, i’ve noticed that on an iPhone and iPad that if the image is clicked (and therefore the menu shown), if you then scroll down the page at this point, the hamburger image stretches and follows the scrolling - and i have no idea why. It only happens when the menu is open.

Please can someone help to explain why and how to resolve. Its driving me crazy trying to figure it out.

My HTML and CSS is below:

<div id="toppricearea"><img src="/get_images/buttons/quick_price.jpg" alt="View our price guide" onclick="viewPriceGuide()" style="cursor: pointer;" class="priceimage">

#toppricearea
{
width: 15%;
position: relative;
z-index: 1;
background-image: url(/get_images/buttons/quick_price.gif);
}
#toppricearea .priceimage
{
width: 75%;
}

#price_guide
{
z-index:800;
display: none;
background-color: #FFF;
width: 200%;
}

Hi,

We will need to see a working example of the problem as the code above is not enough to make a working demo that demonstrates the problem.

Do you have a link to the live site?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.