PDA

View Full Version : Fixed postion elements moving in Chrome on a 24 inch screen


lagado
07-21-2017, 02:01 PM
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

New Perspective Studio
10-01-2017, 04:17 AM
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?

lagado
10-06-2017, 03:48 PM
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,

New Perspective Studio
10-06-2017, 04:14 PM
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.