Resize viewport always focuses on the same location of website

[byteknacker]

When studying the website of Bootstrap Docs, I was resizing my browser to test the intricacies of columns and rows. However, when I did so, the page keeps jumping up and down, making it very hard for me to focus on the change that happened. I had to scroll to the correct location every time I stopped resizing the browser width.

Suggestion for a feature: to make websites built with Bootstrap always focus on the same exact location no matter what happens with resizing the browser.

This will furthermore improve user experience.

I am using:

Mac OS El Capitan 10.11.5, MacBook Pro Late 2013 Model, Chrome latest version, Bootstrap latest version.

[RyanZim]

@byteknacker How would you propose to do this? I can't think of any good ways.

[rafalp]

Okay, so lets give this a tought...

Suggestion for a feature: to make websites built with Bootstrap always focus on the same exact location no matter what happens with resizing the browser.

This happens because way page is displayed changes due to media queries. Some elements turn from rows into lists, some images disappear, etc ect. In an nutshell, this changes page's height moving elements around.

At this point you first need to decide what constitutes the "exact location". If, say, you were 30 px scrooled into 140px tall card containing user's message, but now you have turned your device from landscape to portrait, whats the X offset to the card that's now 190px? How are you going to compute it accurately? Card's header was one-line tall (22px), but now it turned to two-line layout, making it 44px. Perhaps relation to it should be used, so we should set scrool 52px into card?

So you'll decide that checkpoint will be scroll relative to top offset of deepest element that's currently intersected by viewport's top edge. But now you need strategy for handling scenario when element itself isn't leaf node (ergo, its .container and user is scrolled right between two deeper elements). You could keep scroll at the position relative to bottom offset of last direct descendant of the intersected element.

And now you need to see how your implementation plays with scroll management in popular view libraries that are doing it as well, like React.js that also implements suffisticated scroll preservation strategies around its DOM renderer.

And then, few weeks later, while adding another preservation strategy for yet another weird edge case, you will ask yourself, if what you have fixed was really considered an issue by your users. ;)

[mdo]

Not something we plan to solve in Bootstrap, sorry.

[cvrebert]

Also, browser vendors are already working on building similar native features into the browsers themselves:
WICG/interventions#2

[byteknacker]

Many thanks @cvrebert I think it should be something that browser developer will take care of rather than web development frameworks. Good point @rafalp