Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Browser zoom breaking delicate alignment of borders

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #209647
    Alex Zaworski
    Participant

    Hi All,

    I have a nav menu that uses border-bottom to designate currently active pages. Basically the way it’s set up is a border underneath the entirety of the nav bar, and then the active menu item has its own border that lays on top.

    The way I achieved this was to apply a transparent border on each item which changes color with active state, and then apply a negative margin to pull the bottom of the container upward to offset that border. Here’s a Pen demoing what I mean..

    This works just fine for me, until I zoom in or out with the browser, at which point things become misaligned by fractions of a pixel. Is there anything that can be done? Here are some screenshots:

    No zoom:
    without
    Zoomed out 10%:
    with
    Admittedly difficult to see in the screenshot but if you zoom in/out on the Pen (tested in Chrome/FF) it should be obvious.

    #209650
    Alex Zaworski
    Participant

    Here it is in context since I decided that those screenshots were pretty useless. This does a much better job illustrating why it’s a problem (or is it? should I care about how things align when users zoom the window? is there a consensus on that?)

    nav

    #209683
    Alex Zaworski
    Participant

    That doesn’t fix it for me at all— it’s not broken at all zoom levels, 50% and 200% both seem to be fine regardless of the box sizing property.

    The size of the border also seems to matter… I couldn’t reproduce the issue with a 10px border, 3px was worse than 5px, etc. It’s not just ‘bigger borders are better,’ either, because I was able to reproduce with a 22px border.

    Very frustrating :(

    #209694
    Alex Zaworski
    Participant

    The shadow does seem maybe a bit better as far as maintainability but it definitely doesn’t fix the issue.

    I’m aware that fractional pixels aren’t really a thing and it’s definitely a rounding issue but I don’t understand why the two boxes don’t round the same way given that one is sized by the other.

    Probably just going to have to mark this as a won’t-fix and move on for now :/

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.