Firefox/Edge/IE vs Chrome, renders CSS differently

  • Resolved dangonn

    (@dangonn)


    7 years, 1 month ago

    If you look at my Front Page in Chrome, it shows the top image the way I would like it to appear (short, like the other pages) whereas in Firefox and Edge/IE it still shows it filling the page (or worse in a very strange layout). There’s some glitch in my CSS??

    https://www.belleboats.com

    For starters, this code seems to render differently depending on browser:

    .background-fixed .panel-image {
    background-attachment: fixed;
    }

    This code seems to work in Chrome but NOT Firefox/Edge/IE:

    @media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .home.blog.has-header-image .custom-header-media {
    min-height: 100px;
    height: 185px; /* changed from auto */
    }

    .twentyseventeen-front-page.has-header-video .custom-header-media {
    height: 10vh; /* 100vh */
    }
    }

    Is there any CSS that will work cross-browser for stopping the front image from being full height? Many thanks for any help.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I couldn’t replicate this in Firefox v.56, but I could replicate this in IE11. In Firefox, try clearing your cache.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The issue is coming from the use of the @supports condition in your CSS modifications. As you know this condition checks whether the browser supports a certain type of CSS before running some CSS.

    You have this:

    
@supports ( object-fit: cover ) {
	.has-header-image .custom-header-media img,
	.has-header-video .custom-header-media video,
	.has-header-video .custom-header-media iframe,
	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
		height: 185px; /* 175 165 185px 100% */
		left: 0;
		-o-object-fit: cover;
		object-fit: cover;
		top: 0;
		-ms-transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		transform: none;
		width: 100%;
	}

        ...
  }

    IE11 does not recognise the supports condition, so what is happening is that IE11 is skipping the entire of those styles.

    CSS inside the supports condition should only be the thing you’re trying to support; the object-fit style. For example:

    
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: 185px; /* 175 165 185px 100% */
    left: 0;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}

@supports ( object-fit: cover ) {
	.has-header-image .custom-header-media img,
	.has-header-video .custom-header-media video,
	.has-header-video .custom-header-media iframe,
	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
		-o-object-fit: cover;
		object-fit: cover;
        }
        ...

    https://caniuse.com/#search=supports

    Thread Starter dangonn

    (@dangonn)

    Many thanks for your reply, this has definitely helped!

    I’m now working on some resizing issues. I noticed that the overall style.css uses min-width for the @media stuff, whereas some of the solutions I had copy/pasted to my custom CSS used max-width…I think my browsers are getting confused! I’ll get back later if I have questions, I assume in a new thread.

    Thanks again.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Great, a new thread would be better for clarity

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Firefox/Edge/IE vs Chrome, renders CSS differently’ is closed to new replies.