logo-dw

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

Reply
 
Thread Tools Display Modes
Old 07-21-2017, 01:01 PM   #1
lagado
 
Join Date: Jul 2017
Posts: 2
Default Fixed postion elements moving in Chrome on a 24 inch screen

Hello.

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


Thanks


Here is the code:

CSS


.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;
}
#widewrapper{
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
background-color: #333333;
height: 920px;
width: 5295px;
z-index: 1;
max-width: 100%;
}


HTML

<div class="dragscroll" id="widewrapper">
<div id="widecentre_"></div>
<div id="floatmainmenu_"></div
lagado is offline   Reply With Quote
Old 10-01-2017, 03:17 AM   #2
New Perspective Studio
New Perspective Studio's Avatar
 
Join Date: Jul 2017
Location: east london
Posts: 14
Default

Hello Legado did you resolve the problem , As i see in my chrome browser the black block which i assume is your fixed element is not moving at all , i resized the screen width also with no issues.

What version of chrome are you testing on?
New Perspective Studio is offline   Reply With Quote
Old 10-06-2017, 02:48 PM   #3
lagado
 
Join Date: Jul 2017
Posts: 2
Default

Hello and thanks for responding,

I did resolve this problem, but I can't explain the solution. I removed all Z indexes for the fixed elements. It's as though Chrome was using a layer priority value to calculate right-left scrolling, and somehow this only became a problem on a 24-inch screen. Anyway, I‘ve just been back to the page I posted in July with the most recent version of chrome and the problem seems to have disappeared. My guess is there was a strange bug in the browser code that Google has fixed since.


Cheers,



lagado is offline   Reply With Quote
Old 10-06-2017, 03:14 PM   #4
New Perspective Studio
New Perspective Studio's Avatar
 
Join Date: Jul 2017
Location: east london
Posts: 14
Default Glad to hear

Ah well im glad to hear that , if it resolved on maybe you got chrome 61.

Just as an afterthought although im sure you're quite aware of this chrome and Firefox are the easiest browsers to appease , you should make sure its ok in safari and all the rest.

I also auume you know but i wil mention it anyway in case it may help , Google
caniuse.com its a browser css property compatibility comparison site , very in depth even goes to which version of the browsers support whatever property you are asking about.
New Perspective Studio is offline   Reply With Quote
Reply


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 01:10 PM.


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