Fixed content changing position in responsive mode in chrome during carousel image change-CodePudding

I have a webpage here.I have a carousel in which an image is animated as coming from right. When it comes from right I can see a strange thing that all the fixed content (walk me through and chat icon) suddenly change their position when the image comes from right.This is the normal position.This is when the image comes from right.The walk me through and the chat icon are fixed relative to the body element. I have a raw guess that the two images due to being part of the page with display not none, change the calculated height of the body element. But the problem is that it happens in responsive mode only in chrome and otherwise it works fine when viewed without responsive mode on chrome.

Edit1: The culprit is translateX(100%) in animation come-from-right, without it, everything seems to be fine.

Edit2:If we replace translate(100%) with translate(-100%) in animation come-from-right,it works fine.

Edit3:The problem is that the webpage width is increasing when it comes from right, you could see scroll bar's size increasing.

Edit4:Even if we set the width of the body to 100px,even then the carousel is taking much space.

Edit5: If we add .slider img {width:200px;} everything is back to normal

CodePudding user response：

Hope this will help you

<div  style="
    height: 100vh;
    position: absolute;
    display: flex;
    align-items: center;
">      
    <div ><div >?</div><div >Walk me Through
    </div></div>
    </div>

Comment top 50%

.walk-me-through-container {
    position: fixed;
    border: 0.1rem solid var(--white);
    background-color: var(--white);
    height: 18rem;
    width: 4.5rem;
    left: 0;
    /* top: 50%; */
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10000000000000;
}

CodePudding user response：

Using percentages is the real culprit here. Enclose the fixed content's containers and do top and left in vw and vh instead of percentages.Also use only top and left as right and bottom are unstable in the case.To totally solve the problem do html {overflow-x:hidden}, this make all sides stable.Do

.chat {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #369cd9;
  position: fixed;
  top:calc(100vh - 8rem);
  left:calc(100vw - 8rem);
  height:5rem;
  width:5rem;
  border-radius: 50%;
  box-shadow: 0 0 3rem 1rem rgba(0,0,0,0.2);
  z-index: 10000000000001;
  cursor:pointer;
}

and

.walk-me-through-container {
  position: fixed;
  border:0.1rem solid var(--white);
  background-color: var(--white);
  height:18rem;
  width:4.5rem;
  left:0;
  top:50vh;
  transform: translateY(-50%);
  cursor:pointer;
  z-index: 10000000000000;
}