1

I have a multicolumn layout where the column on the right will update with the details of the item selected in the column on the left.

At a zoom level of 110% and below in Chrome, the column on the right will be scrolled to the top when selecting a different item on the left as in the gif below (this is the desired behavior).

enter image description here

However, at 125% zoom level and up, the scroll position of the column on the right is maintained when a new item on the left is selected (or worse, appears to scroll to the top, and then back down).

enter image description here

What could be causing this behavior? I am at a loss as to how to even debug this issue. I have tried messing with the overflow on several elements, and have looked through our styles for things related to scroll, but have come up short so far. The behavior doesn't appear to be specific to Chrome, as I am able to reproduce in Safari as well, but strangely it happens at a higher zoom level in Safari.

elethan
  • 16,408
  • 8
  • 64
  • 87
  • you need to include your code, not just images and gifs – Johannes Feb 17 '20 at 14:59
  • @Johannes normally I would have included the affected code, but part of the issue in this case is that I don't know what code is relevant here. There are a few hundred lines of legacy template code nested in a few more hundred lines across multiple files. My question is more general (and maybe I am naive to think that there is a general answer): in the absence of explicit js code causing the scrolling behavior, what other things can cause this scrolling behavior, and cause it to change as the browser zoom changes. – elethan Feb 17 '20 at 15:14
  • The least you should include is the (Javascript) code that does the scrolling. For example an essential detail is whether that code scrolls to an absolute position (i,.e. a fixed pixel value that measures the distance from the top) and how it gets that value, or if it scrolls to an anchor, or some combination of both – Johannes Feb 17 '20 at 15:36
  • @Johannes that's part of what makes this issue mysterious to me: there is _no javascript_ code that does the scrolling. The issue seems to be related to the styles and how the browser handles them (different platforms and different browsers exhibit the same behavior, but at slightly different resolutions. – elethan Feb 17 '20 at 15:57
  • There has be some JS code, maybe loaded from somewhere else, but without JS that wouldn't be possible (especially the animated scrolling). – Johannes Feb 17 '20 at 17:10
  • 1
    You persist in showing no code: [reprex], please. Having said that, I noticed myself that setting `:root` or `html` fontsizes to px instead of rem (or vice versa) can have that effect when zooming the browser window. My general CSS code for responsive font is: html { font-size: calc(0.625vmin + 0.75rem) }. I never (not never!!) change `:root` font-size. – Rene van der Lende Feb 20 '20 at 17:07
  • So far we can only guess what is causing the issue, without minimum reproductible code. I think this is caused due to default behavior of anchor links, you can prevent default action in the script that runs when you click on the link. have a look at the attached link: https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag – 9841pratik Feb 24 '20 at 11:52

1 Answers1

0

Your issue could be due to the height of the section which gets varied at different zoom levels. Varying in heights may be due to increase in the width of the section after zooming.

If your current scrolling is achieved through plugins, then kindly do reload the browser at different zoom levels and check if the issue still continues. because, most plugins will be configured in a way to effect at page reload only.

If the above mentioned doesn't help, then do share your code snippet or any other info related to the development of this output

Ganeshkumar K
  • 485
  • 2
  • 8