I've seen plenty of threads regarding this issue but I cant seem to find a fix.
I have a div with a background image, and its size is set to cover.
It works fine on every browser and device except for mobile chrome, whenever i scroll up and down the page, the background image seems to resize. I've also noticed the weird bug where if you put background-size:cover before background-image:url('') it ignores the background-size attribute, but if you put it after declaring the background image, it detects the size and sets it to cover, but then has the weird re-sizing scrolling bug.
It's driving me mad! Anyone know of a fix?
Your problem is not the background cover, but when you're scrolling the page, your browser's navigation bar (address bar) is resizing. This leads to resizing of the available viewport to the. And since your background is set to cover, it tries to cover the newly available area, appearing as an image resize.
You can have multiple solutions to this.
1. Make your full size container Absolute or fixed positioned
2. Once the page is loaded, give a height (or max-height) to your container. This, once page is loaded, will keep the height of the element same even when the page is scrolled
You'll require some more tweaks depending on what the page does and what other content it might have.
This problem is similar to having cover background, and the text sentence breaks to new lines on resize, increasing the container height.