Home › Forums › CSS › CSS position bug in Chrome I cannot explain › Reply To: CSS position bug in Chrome I cannot explain
January 31, 2018 at 6:06 pm
#266172
Scipik
Participant
Looks like it’s because of the transform: translate(…) property in in the .rsContainer dom that is used to slide the images. Firefox is instead using the “left” property for the slide animation.
This post goes into some detail about fixed positioning and the transform property. https://stackoverflow.com/a/6794097
// Firefox
<div class="rsContainer" style="left: 0px;"> // Using left property
<div class="rsSlide ">
<div class="rsContent" style="...">
<img class="rsImg rsMainSlideImage" src="..." style="...">
<h3 class="rsABlock sampleBlock" style="..."> // Looks fine
// Chrome
<div class="rsContainer" style="transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> // Using transforms
<div class="rsSlide ">
<div class="rsContent" style="...">
<img class="rsImg rsMainSlideImage" src="..." style="...">
<h3 class="rsABlock sampleBlock" style="..."> // Off centered and doesn't move with window when scrolling
Edit for footer problem:
The footer links is because the z-index has been set to -2, I’m guessing to hide it behind the container. To keep that feature while making the footer still hide, I would change the footer z-index to 0 and add position:relative and z-index: 1 to the container.
#container {
position: relative;
z-index: 1;
}
footer {
z-index: 0;
}