CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromesafari
Pixelsquare
Pixelsquare

Reputation: 173

Different center in Chrome and Safari with same CSS code

I'm trying to make a portfolio website. The website is done but ofc its results differently in different browsers. In Chrome everything works perfectly but in Safari things get weird. My hero text box and hero image icon are centered to the middle in chrome and to the right in safari without changing code. I posted some code and images below.

.hero-text-box {
    position: absolute;
    width: 1140px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.hero-icon-box {
    position: absolute;
    width: 1140px;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The first image is chrome the second one safari.

Image from website in chrome

Image from website in Safari

Upvotes: 1

Views: 681

Answers (1)

Pepo_rasta
Pepo_rasta

Reputation: 2900

use -webkit- prefix for transform

.hero-text-box {
    position: absolute;
    width: 1140px;
    left: 50%;
    top: 50%;
    -webkittransform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.hero-icon-box {
    position: absolute;
    width: 1140px;
    top: 92%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Upvotes: 4

Related Questions