This moron successfully tested the responsiveness on umpteen browsers and all zoomed as expected?
You used one word that gives away why you're not grasping this. It isn't zoom.
Go into any browser and manually set the default font-size to 32px, or do it at the OS level. Under windows 10 you need to enable legacy scaling since they try to shove their new "broken" scaling down your throat, resulting in blurry fonts and broken layouts when you try to go past 120%.
There is a new scaling tech -- and *nix is starting to do this too -- that is actually just zoom, and it's broken crap for users with accessibility needs.
Hence the folks who made XPExplorer -- a great utllity that makes task manager look like a toy -- created this:
http://windows10-dpi-fix.xpexplorer.com/Which forces Windows 10 to revert to the Windows 8.1/earlier behavior so users with accessibility needs aren't bent over the table by Microshaft's unnecessary changes to the UI.
Though firefuxxors continues its longstanding tradition of being accessibility crap. It's like their dev's are intentionally anti-user.
Correcting the errors is easy. Don't use PX for anything more than the occasional border or shadow. Don't use it for padding, don't use it for margin, don't use it for widths or heights. It's called EM, use 'em.
Just to remove confusion across my codebases I also stopped using % for font-size and line-height the past couple years. They're functionally identical to EM just *100, so just use 'em.
If you set background-size:3em 2em; instead of the px measurements it works fine.
Remember, the whole point of EM is to dynamically scale to the system or browser default font-size, while NOT scaling PX level elements since they could become blurry if they are native resolution instead of over-sampled / 2x / or vector. Thus I used a 2x scale image to allow up to double the scale needed without it getting blocky or blurry, and why you declare it in EM. If it were an image the size actually used on the page at normal fonts, I wouldn't even be trying to scale it.
NOTE, in the live copy I hid it behind a "@media(min-width:1px) {" media query so IE8 and earlier don't get the image at all, since they don't support background-size. I should probably do similar for FF8/earlier since apparently I have a user who's still using MacOS 9 like it's still 2002.
