CODEWITHSUNDEEP
csssafari
NineCattoRules
NineCattoRules

Reputation: 2428

Why on Safari the transform translate doesn't work correctly?

I often use this code to center a div in view:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

It works great on Firefox, Internet Explorer and Chrome, however not in Safari.

What's a workaround to center an image in Safari web browser?

Upvotes: 30

Views: 87428

Answers (4)

Elias
Elias

Reputation: 31

.some-element {
  transform: translate(50px 50px) rotate(15deg) scale(1.2);
}

if the above transform doesn't work for you, you can write those out individually as their own properties:

.some-element {
  translate: 50px 50px;
  rotate: 15deg;
  scale: 1.2;
}

reference: https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/

Upvotes: 1

Iggy
Iggy

Reputation: 2131

In some cases you'll have to use:

-webkit-transform: translate3d(-50%,-50%,0);

Sometimes works better with mobile browser.

Upvotes: 1

Muthukannan Kanniappan
Muthukannan Kanniappan

Reputation: 2079

You need another vendor prefixed style.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Please refer below to know which browser supports what and what prefix has to be added. http://caniuse.com/#feat=transforms2d

Upvotes: 36

Murf
Murf

Reputation: 487

Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).

The key for safari (including ios devices) is to add the other transform css rules and not just:

transform: translateY(-50%);

You need to add to it this group of rules:

-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);

Here is some working code of mine:

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Upvotes: 17

Related Questions