🏠 back to Observable

Weird minimap in next?

The minimap looks weird in Next

E.g.,

Seems like things are slightly unaligned

Oh weird. I’m guessing your browser is zoomed in? Just checked and yeah it gets janky when you zoom in… I can try to take a look. (Though browser zoom seems to invariably be kind of janky.)

Thanks for reporting & sorry, that’s my fault!

2 Likes

Oh no! I hadn’t noticed that the browser was zoomed in! I’m sorry for that. Coming back to the default zoom fixed such a weirdness.

1 Like

Hah don’t apologize!! Browser zoom is an important accessibility feature; we should certainly aspire to make things still work when you’re zoomed in, though zoom implementations vary wildly across browsers (as described e.g. here & here).

Hm, seems to look fine at round-number zoom multiples (200%, 300%, 400%…) but not in-between. Fixing it might require doing the whole thing in SVG instead of mixing SVG and HTML and trusting their alignment to hold… might be a while till I can come back to this.

2 Likes

Ok thank you and no worries at all!

PS: here, on Chrome, “modulo 100 === 0” zooms look fine. Intermediate values look unaligned. On Safari and Firefox the problem seems not happening at any zoom value.

Seems it’s the 1px width and height that’s set on each SVG and appears to be ignored by Firefox. If you add the rule

svg {
  width: auto !important;
  height: auto !important;
}

the zoomed minimap looks fine in Chrome as well.

2 Likes

@mootari! goddamn! my mannn :call_me_hand::call_me_hand::call_me_hand::call_me_hand: nice

will include in my next PR of lil fixes

1 Like