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

by

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

More Related Contents:

  1. How can I force WebKit to redraw/repaint to propagate style changes?
  2. is there a css hack for safari only NOT chrome?
  3. How to remove the border highlight on an input text element
  4. CSS3 animation not working in safari
  5. :not() selector not behaving the same between Safari and Chrome/Firefox
  6. Is there a CSS hack to affect Safari only NOT Chrome?
  7. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  8. How to force re-render after a WebKit 3D transform in Safari
  9. How can I remove the gloss on a select element in Safari on Mac?
  10. Bug in CSS3 rotateY transition on Safari?
  11. Is there a way to apply styles to Safari only?
  12. How to detect if the OS is in dark mode in browsers?
  13. Some font-size’s rendered larger on Safari (iPhone)
  14. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  15. How to make radial gradients work in Safari?
  16. Font weight turns lighter on Mac/Safari
  17. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  18. WebKit CSS content Unicode bug?
  19. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  20. Row Wrap in flex-box not wrapping in Safari
  21. Google Font not working on Safari
  22. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  23. CSS background-position not working in Mobile Safari (iPhone/iPad)
  24. (Really) Long Background Image Does Not Render on iPad Safari
  25. How do you easily horizontally center a using CSS? [duplicate]
  26. Footer at bottom of page or content, whichever is lower
  27. element not working in Internet Explorer 11
  28. How to make css a:active work after the click?
  29. Sizing and positioning elements based on window width
  30. Align vertically using CSS 3

Leave a Comment