I'm looking for possible reasons instead of a solution. I don't know if this format is allowed given the nature of my situation, but I'm honestly clueless about the reason of a werid-ish behaviour and don't know if there is one answer to this (probably not).
I'm having an odd issue with a scrollIntoView function. This function uses the id of a div element to reference another div in another element to simulate an index. I used only Javascript to do this and tested in the following browsers (All of them up to the latest version): Firefox (Dev and regular), Google Chrome, Midori, Vivaldi, Edge (Chromium) and Opera. It works in all of them the expected way, with the options not working in Chromium based browsers.
Now, yesterday I rolled out some changes to present to the client. A senior was testing the code when he noticed that the scrollIntoView didn't work in his machine (Using latest Chrome). We double check we had the same code and found nothing different. I asked a front-end senior to look at it and a while later he said it was ok, but it didn't work for him neither (Again, latest Chrome). We had no more time to look at it as we had to go to the meeting. Anyway, the final weird thing happened during the meeting: I didn't show the index, but other functions using scrollIntoView worked with the smooth behaviour in Chrome in the client's machine (Some Google Chrome. Couldn't look for the exact version).
So, it works in my browser(s), not in my senior's but it also works in the client's.
I'm trying to figure out what could be going on with this since we normalize our browsers, OSs and tools versions. The code is very simple as well and I honestly don't think is a problem with the version of the software. Also, while the smooth scrolling in our client's Chrome was weird, I think that's just their machine having that flag on for whatever reason, but those other functions working there tell me that scrollIntoView itself is not the real problem (Kinda).
My function (that didn't work)
function navi(id, ns){
var elem = $('$' + id)[0];
var indice = zk.$('$indice').$n('real');
elem.scrollIntoView({behavior: "smooth"});
indice.placeholder = ns;
}
The functions that did work
function getDivInvol(id){
var elem = zk.$('$d' + id).$n();
estiloActual = elem.className;
eBound = elem.getBoundingClientRect();
pBound = zk.$('$listenerD').$n().getBoundingClientRect();
elem.className = 'ridgeSelect ' + estiloActual;
if(eBound.bottom >= pBound.bottom || eBound.top <= pBound.top){
elem.scrollIntoView({behavior: "instant", block: "center"});
}
}
function rGetDivInvol(id){
var div = '$i' + id;
elem = zk.$(div).$n();
eBound = elem.getBoundingClientRect();
pBound = zk.$('$listenerI').$n().getBoundingClientRect();
if(eBound.bottom >= pBound.bottom || eBound.top <= pBound.top){
elem.scrollIntoView({block: "center"});
}
$(div).effect("highlight", {color: "#7dc0ff"}, 1500);
}
What could I look into to igure out this behaviour? I don't have access to other computer and I really don't want to set up my enviroment in another machine due security reasons. The script itself seems to be fine and there is no need to call the function from the server (I could try that but can't test it, so I'd like to stick to JS).
I'm working on Windows 10 Pro(1904), Java + Zk on Spring and an array of browsers. The solutions I've thought about are to try with JQuery's scrollTop or call the function from the server, but again, I'm looking for a reason my JS is working in some machines only.
Any help would be much appreciated. Happy holidays.
A guess: Since you're working with ZK, there might be a timing/racing issue at client side going on ... ZK has partially timed/delayed functions to render/resize widgets at client side. So even if a DOM node can be retrieved it doesn't always mean it's container has finished resizing. So at the time you're calling the scroll into view function one of its containers might not have a scrollbar yet.
A method to debug: Chrome/-ium has great debugging tools for such scenarios: Especially the profiler is helpful if you are not sure when a function is called in relation to other functions/layout/css/network operations.
You get a time line containing thumbnail of the browser window content. Below you'll have network activity and further down a flamechart called "Main".
In the flame chart you can search for your method name (CTRL-F) and see where it is. And more important see what happens around it (before / after)
Do the same on a PC where it works, and compare the results ... maybe you'll spot a difference in the order your's and other functions are called.
This can help you to POST a more concrete question.