Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS position bug in Chrome I cannot explain Reply To: CSS position bug in Chrome I cannot explain

#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;
}