On display of hidden element it shows on wrong place because of scroll, only in chrome

Question

I don't realy know how to explain this thing in short sentence. I don't know if it is bug or not..

In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.

I tried to search for this problem, cause it should be pretty common. But nothing came up.s

It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome. https://jsfiddle.net/zvwcdzjz/2/#

PS I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome. It can be solved with jQuery too, makes no difference for me.

HTML:

<div id="el">
  <div class="content">
    <div class="block">
      <div class="blocktoopen"></div>
      <div class="button">click to open</div>
    </div>
    <div class="block">
      <div class="blocktoopen"></div>
      <div class="button">click to open</div>
    </div>
    <div class="block">
      <div class="blocktoopen"></div>
      <div class="button">click to open</div>
    </div>
  </div>
</div>

CSS:

#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}
#el .content {
  width: 300px;
  height: auto;
}
.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
}
.button {
  background-color: blue;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-top: 90px;
  float: left;
}
.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  margin-left: 300px;
  background-color: red;
  display: none;
}

JS:

$(function(){
    $(".button").click(function(){
    $(this).parent(".block").children(".blocktoopen").show();
  });
  $("#el").scroll(function(){
     $(".blocktoopen").hide(); });
});

Answer 1

The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:

Change:

#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}

To:

#el {
  width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}

And then you're good to go.

Answer 2

To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.

.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
position: relative; 
}

.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%; 
bottom: 50%;  
  background-color: red;
  display: none;
 right: 0;
}

Answer 3

I can't post comment so here is another try with jsfiddle . I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px

#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}
#el .content {
  width: 300px;
  height: auto;
}
.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
  position: relative; 
}
.button {
  background-color: blue;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-top: 90px;
  float: left;
}
.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  display: none;
  top: 50%; 
  bottom: 50%; 
  right: 0;
}

.internal{
  width: 225px;
  }

Answer 4

Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none; . Maybe trying to set the position: relative; ...

Just seen the jquery script. Show() and hide() appears to work as visibility css property. If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.