Theo's Typesafe Cult•2y ago

Weird color change from production to developement?

Hi, I've recently encountered one of the weirdest things in some time. On my development build of my nextJS 13 app (t3-stack) I am using the following color code: #F9C74F in a css file. Also on inspect element it shows that color code. On my production build that exact same color code in inspect element is shown as: rgb(128, 93, 11); How is this even possible and how can I fix this? I can find no resources on google about this and I don't even know where to look.

26 Replies

Xaohs•2y ago

First screenshot is production, second one is development

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

Hmm same issue This is the css in question:

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 40px;
    height: 40px;
    animation: animate 25s linear infinite;
    bottom: -150px;
    cursor: pointer;
    
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 7s;
    background-color: #F9C74F;

}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 40px;
    height: 40px;
    animation: animate 25s linear infinite;
    bottom: -150px;
    cursor: pointer;
    
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 7s;
    background-color: #F9C74F;

}

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

Well I have 10 total childs all with different colors and all of the colors of these childs get changed to rgb values instead of their original hex values

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background-color: #4C8EFA;

}



.circles li:nth-child(2){
    left: 10%;
    width: 40px;
    height: 40px;
    animation-delay: 2s;
    animation-duration: 6s;
    background-color: #b3193d;
}

.circles li:nth-child(3){
    left: 70%;
    width: 70px;
    height: 70px;
    animation-delay: 4s;
    background-color: #65DA70;

}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 9s;
    background-color: #FBCC41;

}

.circles li:nth-child(5){
    left: 65%;
    width: 50px;
    height: 50px;
    animation-delay: 0s;
    background-color: #12d382;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
    background-color: #F34356;

}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
    background-color: #41EFE7;

}

.circles li:nth-child(8){
    left: 50%;
    width: 40px;
    height: 40px;
    animation-delay: 15s;
    animation-duration: 8s;
    background-color: #DA36CD;

}

.circles li:nth-child(9){
    left: 20%;
    width: 30px;
    height: 30px;
    animation-delay: 2s;
    animation-duration: 9s;
    background-color: #974081;

}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 7s;
    background-color: #F9C74F;

}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background-color: #4C8EFA;

}



.circles li:nth-child(2){
    left: 10%;
    width: 40px;
    height: 40px;
    animation-delay: 2s;
    animation-duration: 6s;
    background-color: #b3193d;
}

.circles li:nth-child(3){
    left: 70%;
    width: 70px;
    height: 70px;
    animation-delay: 4s;
    background-color: #65DA70;

}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 9s;
    background-color: #FBCC41;

}

.circles li:nth-child(5){
    left: 65%;
    width: 50px;
    height: 50px;
    animation-delay: 0s;
    background-color: #12d382;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
    background-color: #F34356;

}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
    background-color: #41EFE7;

}

.circles li:nth-child(8){
    left: 50%;
    width: 40px;
    height: 40px;
    animation-delay: 15s;
    animation-duration: 8s;
    background-color: #DA36CD;

}

.circles li:nth-child(9){
    left: 20%;
    width: 30px;
    height: 30px;
    animation-delay: 2s;
    animation-duration: 9s;
    background-color: #974081;

}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 7s;
    background-color: #F9C74F;

}

Xaohs•2y ago

This is the inspect element of the 10th child

Xaohs•2y ago

Something weird is happening to it The hex value is canceled out for this weird rgb value

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

It's a private repo Trying in both firefox and chrome I have no inline styling on these elements... but it seems something is adding this new background-color which overwrites the original hex value

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

ye Wait just tested in edge and there it's correct the values in chrome its exact same as firefox

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

yeah

Xaohs•2y ago

this is in edge this is so weird lol

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

oh wait oh oh oh

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

about that

Xaohs•2y ago

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

Hahah

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

I'm so dumb. Alright thank you so much! yep

Unknown User•2y ago

Message Not Public

Xaohs•2y ago

Yeah I never have the reason is I am running on port 3001 for a change, cus my production needs to run on port 3001 normally I run on port 3000 So it totally slipped my mind Thank you for your help! Have a nice day

Unknown User•2y ago

Message Not Public

Gaming

Programming

Weird color change from production to developement?