Search code examples
htmlcsssafarimobile-safari

Safari Mobile and object-position property

I have a question regarding Safari Mobile and CSS object-position/object-fit property.

I've tried to use it, but it doesn't work for me.

I've seen 2 different answers(Safari Mobile supporting this property and doesn't support)

There is my example:

img {
  object-position: 0 -300px;
  width: 112px;
  height: 50px;
  display: block;
  float: left;
  margin-right: 10px;
}

I'm using CSS sprites for menu icons as img, not as background.

How I can solve this issue?

Solution

  • iOS safari does support object-fit however doesn't support object-position

    See Can I use CSS3 object-fit/object-position ?

    1 Partial support in Safari refers to support for object-fit but not object-position.

    SS

    A possible solution is using background with background-position

    Other solution, given you are using icons, would be using glyphs, from Font-Awesome or Glyphicons, just to name a few.

    Here is a good article about CSS sprites