CSS position bug in Chrome I cannot explain

[guillaume]

Hello,

I’m about to publish my last project and discover a problem using Chrome.
In the page I’m displaying a video + title and text. The problem is to position the Title & text.

Please see with Firefox and then the problem in Chrome :
http://patriciadoreye.com/wp/motion/

Do you have any idea why divs “.rsABlock.sampleBlock” are misplaced in chrome ?

I do have another problem regarding the footer which links cannot be reached/clicked because of a problem of z-index.

Thanks for your feedback.
Guillaume

[Scipik]

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

[guillaume]

Thanks for your detailed answer, I will have a look and fix this.

[guillaume]

I @Scipik !

Again I would like to thank you for your time helping me. The website is live since a couple of months now.

Strangely, it happen that the footer get messed up with the content of the page with “Safari”.
It’s like if the background-color is missing somehow.

I would gladly have your thoughts on this.

https://patriciadoreye.com/

Guillaume

[Author]

Posts