Hi there!
I am currently working on the site at goexercise.info. I have many divs that have a full-div background image with width:100% and height:100%. The site looks great on the desktop; however, on mobile the background images and their divs accordingly seem to resize whenever the user scrolls far enough down the page. Any ideas?
Try using
width:100%;
height:auto;
on the images or
max-width:100%;
height:auto;
It looks OK on my phone. Could you explain what the issue is?
Hi ralphm, when you scroll down enough past each div the image in the background will resize for some reason, changing the div size as well. To see this effect, scroll down slowly through the page.
Addition: Apparently this only happens on Chrome Mobile; I have done some testing.
I don’t have chrome on mobile to test but apparently its very buggy anyway however I think the crux of your problem will be that you have built the page relying on a technique from the last century. You have used a quirks mode doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
That doctype was mothballed at the end of last century and you should be using the new html5 doctype especially as you have built your page using html5 elements anyway.
The reason you have utilised the old doctype is to trigger a legacy behaviour where your height:100% will work and give you the full height of the viewport. This was a flawed approach as legacy behaviour was incorrect anyway and you are not supposed to be able to give height:100% to nested children unless they have a parent of fixed height to base their height on and so on all the way back up the tree to the html and body elements.
The usual way to accomplish (before css3) is is to set html and body to height:100% and then non-nested divs can use a 100% height to gain their height.
In your page you should use a valid html5 doctype and then set html and body to height:100% and then for the 100% high divs use display:table with width and height of 100%. These divs cannot be nested unless you also set their parent to height:100% also.
Perhaps a quick fix may be to use the vh unit for modern browsers instead and use height:100vh with a fallback to height:100% for older browsers.
Suffice to say though that if you build your page with a quirks mode doctype then all bets are off.
I cannot say for certain that this is the problem with chrome but it would be my ‘on the money’ bet. I’m inclined to believe that some mobile browsers will not obey legacy behaviour because for the most part there will be no need. However as chrome seems to be buggy in mobile anyway the above may not help 
Haha, thanks for the advice. Unfortunately it appears that it doesn’t change anything within chrome mobile…
Oh we’ll it was worth a try.
I’ll have to find a device that has chrome installed to test properly.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.