View Single Post
Old 07-21-2017, 01:01 PM   #1
Join Date: Jul 2017
Posts: 2
Default Fixed postion elements moving in Chrome on a 24 inch screen


I am I am building a wide, horizontally scrollable virtual gallery where the images on the gallery wall are individually linked to their full-screen pages. The site has two narrow fixed menu bars on either side.

When viewing through Chrome (I’ve tested IE, FF, and Safari), the fixed position sidebar menus scroll with the “drag scroll” classed container DIV. There is hesitation and scurrying that makes me think there’s a conflict. I have media queries for 4 different screen sizes but I don’t think this is the problem. The very same window dimensions on a 21-inch screen function properly until dragged to the 24-inch screen. The fixed elements lose their position on a 24-inch screen after reaching a height of roughly 720 pixels. Limiting the max width or height of the container DIV with device screen media query did not solve this. Somehow Chrome knows when it’s on a 24-inch screen and when it’s not. Variations of “webkit transform” styling codes did not help either.

In order to demonstrate I have reduced the page to its essential componants, including all and device screen media querries, but the problem I am describing can only be witnessed on a 24 inch screen.This simplified version is simply a fixed position element ( top right corner) inside the image container “widecentre” wrapped by a relative positioned container “ widewrapper”.

The page demo page is here

It should display correctly on any screen at any size in Firefox, Safari and Internet Explorer, but in Chrome the fixed element will move while scrolling on a 24 inch screen.

I'm stumped and would greatly appreciate any suggestions


Here is the code:


.dragscroll {
overflow: scroll;
cursor: grab;
cursor : -o-grab;
cursor : -moz-grab;
cursor : -webkit-grab;
#floatmainmenu_ {
position: fixed;
top: 0%;
width: 150px;
height: 135px;
max-width: 7.81%;
max-height: 12.5%;
z-index: 9;
background-color: #333333;
right: 0%;
#widecentre_ {
position: absolute;
top: 0%;
height: 100%;
z-index: 2;
background-color: #FF060A;
display: block;
left: 0%;
max-height: 100%;
width: 5202px;
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
background-color: #333333;
height: 920px;
width: 5295px;
z-index: 1;
max-width: 100%;


<div class="dragscroll" id="widewrapper">
<div id="widecentre_"></div>
<div id="floatmainmenu_"></div
lagado is offline   Reply With Quote