Recently for the second time, I’ve discovered a webpage that had been displaying properly in Chrome no longer did so, with no changes on my end. I can’t even pin down where Chrome is going wrong. I’ll give my examples, and thanks for any suggestions, hints, or solutions!
background-image
The website saversetter.com uses background-image(s) tiled vertically. Chrome no longer shows them. View in Firefox or IE for the gradient background to be visible. Chrome showed this correctly until a few months ago.
position
Scroll to the bottom of a page on deadlynightshades.com and hover over the zoomers there. Until a few weeks ago Chrome and all browsers showed the title swooping into place center-bottom. Then suddenly, I know now, Chrome alone started mis-positioning the titles. I fixed that in Chrome, only to break it in the other browsers which is how it is now. This example currently looks good in Chrome, but shouldn’t. View the zoomers in Firefox or IE to see how a mis-aligned title looks.
These pages worked in Chrome, then suddenly no longer displayed correctly, with no known changes on my end. In its updates, has Chrome been changing, drastically, CSS display for rules involving background-image or absolute position?
ADDENDUM: This question Is there a bug in Chrome's CSS visibility rendering? looks relatedto my zoomer problems, sorry I didn’t spot it sooner!
SOLUTION: Sorry for asking this, then figuring my own solution. Asking helped me frame the problem, but I’ll be more careful with your time in the future!
The position problem was fixed by specifying a percentage position instead of a pixel position, in the css created by the jquery for animating the title. No general solution to this, or what it was about Chrome that changed. Could not reproduce in a test environment, so it is something about my page in addition to changes in Chrome.
Concerning background-image display, Chrome has issues with background-size.
background-size: 25% auto; is being reduced to background-size: 25%; and the 25% is being reused incorrectly for height as well as width. I changed “auto” to “100%”, and Chrome started showing the one-pixel tall images. Exactly what auto means in this context is unclear, I don’t know why I used it to begin with, but Firefox and IE render it as the size of the image, while Chrome appears to use the other, defined, value for both dimensions.
I just wanted to post your solution so that it was obvious it had been found, and anyone looking for the answer doesn’t miss it. It looks a bit hidden up in your question.