Css Advanced Course crashed layout of all Natuors

[DeividVeloso]

Good morning!

Jonas, how are you?

I have a question/complain about you course of CSS.

I found a bug in your site https://natours.netlify.com/ if you reload the page all design crashed, I found this when I build tours card, if you refresh the page in tour cards the property back-face-visibility doesn`t work well, first it show back card and 2 seconds after it show front card.

In Udemy I dont find anyone fix that and have many question about this without a answer .

Could you please help us to fix that.

I attached some gif record to show the problem.

Sorry for my english.

[husseinextime]

It's a problem that happens on the browser-end, if you have written everything correctly then don't worry you can use other browsers or put backface-visibility:hidden on the container (the card) so it'll get rid of it.
Actually I have no idea how and why it fixes it but it does (As Jonas said in some of his videos)

[DeividVeloso]

Thanks to reply, but using this not resolve when refresh.

If you want you can see my repository: https://github.com/DeividVeloso/advanced-css

When we refresh page, first they render that way

And after it render correct

[jonasschmedtmann]

Thanks for letting me know, I will fix this is future updates

[ghost]

Hi sir,
position:fixed in navigation is not working in any browser. How to fix it? code is:
`.navigation{

&__checkbox
{
    display: none;
}

&__button
{   
    background-color: $color-white;
    height: 7rem;
    width: 7rem;
    position: fixed;
    display: block;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 2000;
    -webkit-transform: translateZ(0);
}

&__background{
    height: 6rem;
    width: 6rem;
    border-radius: 50%;         
    position: fixed;
    top: 6.5rem;
    right: 6.5rem;        
    background-image: radial-gradient($color-primary-light,$color-primary-dark);
    z-index: 1000;
    -webkit-transform: translateZ(0);
    transform: scale(50);
}

&__nav{
    height:100vh;
    width:100%;
    position: fixed;
    top:0;
    right:0;
    z-index: 1500;
    -webkit-transform: translateZ(0);
}

&__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    list-style: none;
}

&__item{
    margin: 1rem;
}

&__link{
    font-size: 3rem;
    font-weight: 300;
    color: $color-white;
    text-decoration: none;
    text-transform: uppercase;
} 

}`

[OlegSuncrown]

Good day!
Also title EXCITING TOURS FOR ADVENTUROUS PEOPLE after refresh has black color for 1 sec,
to fix this you can change transition: all on transition: transform .2s, text-shadow .2s;

[AayushKarna]

transition: all .2s is the problem because it animates (transitions) everything for like rendering the element when the page loads, refreshes, zoom, position change, style change by media query when adjusting windows size . Simple solution is to always specify what you want to transition like transition: color .2s, background-color .2s, opacity .2s; this way you can prevent this kind of issue. It may be some work but it is good to do that than have buggy effects happening in the site. Also using transition: all could cause major drawbacks in performance.

[Ogabekazizqulov]

thank you