Solved

Chrome jumping to "multiple" select field in popup window

Posted on 2014-11-02
27
405 Views
Last Modified: 2014-11-03
I'm opening a window popup from my html main page. The popup contains some text and then a few fields "select multiple"
Recently the popup window has begun "jumping" (auto scrolling) when opening the popup window, to make the select fields visible. Thus, the text in the beginning of the page is scrolled out of view.
Maybe this is due to some Chrome update? I'm using 38.0.2125.111 when getting the behaviour)

I can repeat the behaviour with these two simple html pages:

File page1.htm:
<html><body>
<script type="text/javascript" language="javascript"><!--
function TestIt()
{
  var win = window.open('page2.htm', 'Test', 'width=600,height=500,scrollbars=yes,resizable=yes');
}
//--></script>
<a href="javascript:TestIt();">Open window</a>
</body></html>

Open in new window


File page2.htm:
<html><body>
Start<br><br><br><br><br><br><br>
Some row space<br><br><br><br><br><br><br>
Some more row space<br><br><br><br><br><br><br>
Even more row space<br><br><br><br><br><br><br>
And even more row space<br><br><br><br><br><br><br>
<form>
Field 1:<br>
<select size=3 multiple>
  <option selected>A selection</option>
  <option>Another selection</option>
  <option>Some other selection</option>
</select>
<br><br>
Field 2:<br>
<select>
  <option selected>A selection</option>
  <option>Another selection</option>
  <option>Some other selection</option>
</select>
</form>
</body></html>

Open in new window


Sometimes the page2.htm is automatically scrolled down directly when opened. Most times I however need to re-open the already opened popup to get this strange behaviour (clicking again on page1.htm with page2.htm still on the screen)

Can anyone repeat this?

Note that only select fields that are "multiple" trigger this behaviour. This, it's only "Field 1" above that will be made visible. However, if the "Field 2" is also made "multiple", then this field will also be scrolled into view.

It only appears with Chrome, not on other browsers that I tested. And, as noted, I use Chrome 38.0.2125.111
0
Comment
Question by:stefanlennerbrant
  • 13
  • 10
  • 4
27 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40418247
http://code.google.com/p/chromium/issues/detail?id=423256

I have a fix just add this at the top of the page

<input type="hidden">
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418250
its because "selected " in option

change  <option selected >A selection</option>
to
 <option >A selection</option>
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418254
its because "selected " in option
No, it's a bug
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418255
I know its chrome bug in new version on new version.
But if you could check by removing selected option it works as expected


<html><body>

Start<br><br><br><br><br><br><br>
Some row space<br><br><br><br><br><br><br>
Some more row space<br><br><br><br><br><br><br>
Even more row space<br><br><br><br><br><br><br>
And even more row space<br><br><br><br><br><br><br>
<form>
Field 1:<br>
<select size=3 multiple>
  <option  >A selection</option>
  <option>Another selection</option>
  <option>Some other selection</option>
</select>
<br><br>
Field 2:<br>
<select>
  <option >A selection</option>
  <option>Another selection</option>
  <option>Some other selection</option>
</select>
</form>
</body></html>
                           

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40418259
I know its chrome bug in new version on 31.
Because I just told you, and Chrome is on v38
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418266
LOL :)

https://productforums.google.com/forum/#!topic/chrome/BoarsOZwfYU[1-25-false]
Please read the article for its solution too
0
 

Author Comment

by:stefanlennerbrant
ID: 40418267
@Gary, adding a hidden field to the top of the page did not change the behaviour for me.

However, removing "selected" did solve the problem. I actually tested with removing "selected" as well, but obviously I had my tests mixed up and thought that I still got the problem even with "selected" removed. By bad.

However, removing "selected" is not a possible solution in real life. The user must have some values selected in these "select fields", that's the purpose with the whole application page :-)

But do you mean that this is a known bug since Chrome 31, and still exists in Chrome 38? Wow.
Do you have any pointer to bug reports on this? I have searched on it but haven't found any good info.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418270
LMAO
Nothing to do with the question.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418272
It hasn't been there since 31, it's new.

Bug report is above in my comment
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418275
you could do one thing remove selected from option and when page load mark it as selected via jquery.
I know its wrong solution but until chrome fixes it we have to go that way.
0
 

Author Comment

by:stefanlennerbrant
ID: 40418276
@insoftservice, what's that link? I went through it and it doesn't concern this at all, does it?
  https://productforums.google.com/forum/#!topic/chrome/BoarsOZwfYU[1-25-false]
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418278
0
 

Author Closing Comment

by:stefanlennerbrant
ID: 40418279
Great Gary, this nailed it. Thanks a lot!
Something new with v38 in other words? Let's see what happens in the bug report...

However the "input hidden" solution did not help.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
ID: 40418280
Weird it was working for me.
Use this instead

<select size=1 multiple style="display:none"></select>

Forget that as well, seems to work sometimes.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418283
Weirder, if do you an hard refresh (in the popup), it works.
Do another hard refresh and it stops working
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418287
Add before the closing body tag

<script>
window.scrollTo(0,0);
</script>

Open in new window

0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418288
http://www.askvg.com/how-to-enable-smooth-scrolling-feature-in-google-chrome/

try out this link

May i know how that point is being given points

go to chrome://flags/

Select enable option from Accelerated overflow scroll
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418299
@stefanlennerbrant


However, removing "selected" did solve the problem. I actually tested with removing "selected" as well, but obviously I had my tests mixed up and thought that I still got the problem even with "selected" removed. By bad.

However, removing "selected" is not a possible solution in real life. The user must have some values selected in these "select fields", that's the purpose with the whole application page :-)

For not removing selected option i had already provided you the solution in my comment 40418275
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418384
@insoftservice

Why do you keep posting links to completely irrelevant pages? Did you actually read them or just post the first thing that came up in Google?

The OP already said they cannot remove the selected so it is not a solution
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418388
I doubt even your comment was the solution, Your comments only specifies that there is a bug
please read my comments 40418275
which says we have to remove selected and later prefilled it via jquery using onload().

Regarding the links i had given thinking might be setting had been disabled at authors end and thats the reason  he was not getting the soltuion after adding hidden variable
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418389
It is the answer as it is a bug, cannot be stopped.

Or the simplest solution
http://www.experts-exchange.com/Q_28549224.html#a40418287
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418396
ya i agree with your these points that this can be the answer but its one of the solution and not the only solution

As a developer we can't let our customer get issue on our product so we have to give some patch until such bugs are resolved.
Simple eg we use to do  for IE browsers
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418406
Your solution is change all their html, add the jquery library (even though they never said they were using it), build an array of all the selects and what the selected values should be then build a script that then goes through all the selects and sets the selected value.

Not really a viable solution. Maybe it would have been if you had actually written the code to do it but you didn't
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418410
so does it implies that your solution of bug was right.
If author had requested we would given that. It was just a basic algo for the solution and not exact solution
0
 
LVL 58

Expert Comment

by:Gary
ID: 40418413
You didn't even know it was a bug til I told you

End of this discussion.
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40418417
:)
0
 

Author Comment

by:stefanlennerbrant
ID: 40418945
Well, wow guys! :-)

But anyhow - the link to the bug report was without doubt the "solution" to this issue.
As this (hopefully quite quickly) bug will be fixed in next versions, all possible workarounds (like building a list of selected-indexes, and scripting to set them dynamically) are unneccesarily complex.

If, however, bug-fixing had not been ongoing, then such complex workarounds would possibly be interesting.

By the way, scrollto() might have been another such a workaround but it's also too complex, considering the situation, as one would need to hide all content output during rendering (to avoid showing the "jumps" to the user) alternatively handle situations where the user begins scrolling during page output (to make sure that scrollto doesn't interfere with the user's own scrolling)

Thanks, anyhow. I'll keep my fingers crossed for a v39 solution :-)
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now