No replies
lagado's picture
Last seen: 2 years 8 weeks ago
Timezone: GMT-4
Joined: 2017-07-19
Posts: 1
Points: 2


I am building a 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 components, including all device screen media queries, but the problem I am describing can only be witnessed on a 24 inch screen. This simplified version is just 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
There is a full ( responsive) version 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.

Here is the code:

CSS ( inline)

[.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%;




Any help with this would be greatly appreciated.