I am trying to display an image that fill the whole page. I also put an element (a white div) on the image. When hover on the element, the div's size will be increase and decrease when hover off.
It's working with no problem on Chrome, safari and Firefox.
However, I found when I open the page on Microsoft Edge, when dragging the browser to certain size - the scroll bar is just about to showing up but display as very strange light grey. If I hover the element, the whole page is start shaking because the browser seems to adjusting the scroll bar.
You can see the problem here:
https://codepen.io/HelenIT/pen/xxEaeJJ
And here is my code for HTML, CSS and JQuery:
<div>
<img src="~/Images/test.jpg" style="width:100%; height:auto;" />
<div class="csTest">
Hover on me
</div>
</div>
CSS:
.csTest {
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 200px;
background-color: white;
}
Jquery:
$(".csTest").hover(function () {
console.log("over");
$(".csTest").animate(
{
height: 200,
width: 200
}, 700);
}, function () { //hover off
console.log("off");
$(".csTest").animate(
{
height: 100,
width: 100
}, 700);
});
This is my first post, if I am posting not right, I would really appreciate your help. I also really appreciate anyone's help because I am kind of desperate on how to solve the problem.
Here is the image on when the problem happens, what is the scroll bar looks like
[link]https://rmssdstorage.blob.core.windows.net/www/error_1.png
