search

structurizr / ui

UI code for Structurizr Lite, on-premises, and cloud service.
https://docs.structurizr.com/ui
MIT License
43 stars 27 forks source link

Scrollbar behaviour during zoom #8

Closed tk closed 1 year ago

tk commented 1 year ago

If I zoom in my browsers (Firefox 110.0.1 (32-Bit), Chrome 110.0.5481.178) show two scrollbars (see attached screenshot). 1) For the area of the diagram 2) For the whole window grafik This complicates the navigation in the diagram.

Adding overflow:hidden; to the body CSS definition fixes the problem, but reveals that the vertical scrollbar of the diagram area is not 100% visible.

simonbrowndotje commented 1 year ago

I can't reproduce this myself, but I suspect it's either something like a rounding error when calculating the viewport size, or it's a Windows specific thing (I'm on a Mac). Do you see the same issues with the example diagrams?

tk commented 1 year ago

Yes, I can reproduce it on my Windows machine: grafik

Box-Model Body: grafik

Box-Model div id= "diagramNavigationPanel" grafik

Box-Model div Diagram area grafik

simonbrowndotje commented 1 year ago

Thanks for the into ... I think it's now resolved.

tk commented 1 year ago

Yes, thank you. I can confirm that it is gone for the example diagrams! 👍

simonbrowndotje commented 1 year ago

You're welcome! BTW, here's what scrollbars look like on the Mac:

image

As you can see, they sit over the top of the content, and only show while scrolling ... i.e. they disappear within a couple of seconds when not being "used", which makes getting a screenshot pretty tricky! This makes for an interesting UX ("I didn't know this was scrollable because there are no scrollbars"), but a cleaner UI. This is why the issue didn't affect the Mac - the scrollbars don't take any additional pixels from the possible diagram width/height.