Skip to main content

Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • in reply to: Is this a Firefox bug or am I missing something? #267904
    Scipik
    Participant

    Changing the font-size to 57 or 59 from the below query in the code also seemed to fix it for me. I couldn’t tell you why without digging in further, but this could be a solution for your current problem.

    @media only screen and (max-width: 37.5em){
    html{font-size:58%}
    }

    in 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;
    }
    
Viewing 2 posts - 1 through 2 (of 2 total)