Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Thread Tools Display Modes
Prev Previous Post   Next Post Next
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 http://www.moisdelaphoto.ca/R.html.

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

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 04:57 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com