Kevin Powell - Community•3w ago

Zoom issue on chrome

Hi, is there a way to set the scale specifically for chrome in css or html? because the zoom is ok for all browsers except chrome

23 Replies

Jochem•3w ago

like I said in #chit-chat, it's likely better to fix the zooming issue rather than to force chrome to behave differently

GabrieleOP•3w ago

and how do you fix that?

Jochem•3w ago

to answer the question as stated, there aren't any ways you should ever use in a production environment to target a specific browser. that depends on what the issue is, and that's not something that anyone can answer in abstract. You'll have to share your code and describe the actual issue you're having

GabrieleOP•3w ago

In all the major browser the page looks 100% but in chrome it looks 110%. More zoomed in this is on every project i did

Jochem•3w ago

I honestly have never heard of that being a thing. I've never experienced it myself do you have any site live where this is the case?

GabrieleOP•3w ago

if you search on google you will find some people with the same problem yes i can send you a website https://todolistinreact.netlify.app/ it looked more zoomed in on chrome

Jochem•3w ago

those look indentical to me. I overlayed a screenshot form chrome and firefox:

Jochem•3w ago

when I move them to be the same vertical position as well, they're pixel-perfect the same

GabrieleOP•3w ago

you tested from your pc and the zoom is identical in both browsers?

Jochem•3w ago

yes

GabrieleOP•3w ago

you have a 1080p screen?

Jochem•3w ago

1920x1200, but effectively yeah

GabrieleOP•3w ago

i have a 1440p, could that be the problem?

Jochem•3w ago

no idea, tbh. My first troubleshooting test would be to see if you accidentally hit ctrl + at some point and Chrome is just set to 110% but if that's not the case, I have no idea

GabrieleOP•3w ago

that's the first thing i tried. But if from your screen it's ok then i guess its just my problem thanks for the help

Jochem•3w ago

no worries. Hopefully someone else has an idea, I don't personally use chrome a lot so I might be missing something

Chris Bolson•3w ago

I opened this on Chrome and Firefox, both windows exactly the same width. On Chrome the element was 500px wide and on Firefox it was 480px wide. The inspector showed that the @media (max-width: 1280px) { was coming in to effect in sooner on Firefox than on Chrome which explains the difference. I have no idea why that would happen 🤔

GabrieleOP•3w ago

but if you say it looks fine for you as well i guess everything is ok i wonder if for people with 1440p and 4k monitors it will be different like for me your monitori is 1080p?

Chris Bolson•3w ago

my monitor is Mac Studio Display so it has 5k, I am not sure what that translates to 🤔

GabrieleOP•3w ago

no idea then but if everything works im ok with that ahah i will test in another pc ill get in one month or ask to a friend today that has also a 1440p monitor

Chris Bolson•3w ago

At the end of the day you have to remember that web is not the same as print. You can't expect or hope that everyone will have exactly the same experience. Each computer is different and many things, out of your control, can define what the user actually sees - resolution, viewport size, coloring, default settings, browsers....

ἔρως•3w ago

remember that the chrome changes between browsers firefox now has the fugly side tabs and i think it still uses it's own scrollbars chrome just uses the nasty disgusting windows 11 bars

curiousmissfox•2w ago

Could it be the 2x vs 1x, the scrollbar math whrre chrome includes scrollbar width in 100vw and Firefox does not, device pixel ratio, ff settings “zoom text only”, chromes settings font size set larger so 1rem != 16px, the units the code uses, etc. ChatGPT gave me this snippet

Js 
console.table({
  'devicePixelRatio': window.devicePixelRatio,
  'pageZoom-ish': (screen.width / window.devicePixelRatio) / (screen.availWidth / 100), // rough sanity check
  'innerWidth (CSS px)': window.innerWidth,
  'visualViewport.width': visualViewport?.width,
  'matches ≤1280px': matchMedia('(max-width: 1280px)').matches,
  'scrollbarWidth (px)': window.innerWidth - document.documentElement.clientWidth
});

Js 
console.table({
  'devicePixelRatio': window.devicePixelRatio,
  'pageZoom-ish': (screen.width / window.devicePixelRatio) / (screen.availWidth / 100), // rough sanity check
  'innerWidth (CSS px)': window.innerWidth,
  'visualViewport.width': visualViewport?.width,
  'matches ≤1280px': matchMedia('(max-width: 1280px)').matches,
  'scrollbarWidth (px)': window.innerWidth - document.documentElement.clientWidth
});

What to look for: • If matches ≤1280px differs, the browsers disagree on viewport width (likely zoom/DPR/scroller). • If devicePixelRatio or scrollbarWidth differ, that explains it. • If innerWidth differs by ~20px, that’s your “500 vs 480” right there.

Gaming

Programming

Zoom issue on chrome

Did you find this page helpful?