CODEWITHSUNDEEP
htmlioscsssafari
Ramesh
Ramesh

Reputation: 2403

display:inline-grid doesn't support on very fresh safari

In my website i designed a ul which displays social icons in my page.

structure

<ul>
  <li>icon1</li>
  <li>icon2</li>
  <li>icon3</li>
  <li>icon4</li>
</ul>

css

ul{
   list-style-type: none;
}
ul>li{
  display: inline-grid;
}

The above css works in all the css except non fresh safari browsers.I found this issue while checking on OPPO mobiles. They are using non fresh safari.

Screenshot from IOS safari browser

Screenshot from OPPO browser

There is a same kind of question in stackoverflow here (Why doesn't inline-grid work in Safari?). But there I couldn't find a proper alternative answer for this issue.

Upvotes: 3

Views: 618

Answers (2)

dsmaslov
dsmaslov

Reputation: 41

You can use flexbox instead of grid. Support for old Safari (from version 7 with prefix) is: https://caniuse.com/#search=flex

ul{
   display: flex;
   list-style-type: none;
}
<ul>
  <li>icon1</li>
  <li>icon2</li>
  <li>icon3</li>
  <li>icon4</li>
</ul>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

It does not work because the safari does not support inline-grid;

The supporting is only from:https://caniuse.com/#feat=css-grid

safai: version 11.1 + 
safari ios: from version 10.3 +

You can use display: inline-block; instead inline-grid;

ul{
   list-style-type: none; 
}
ul>li{
     display: inline-block;
}
<ul>
  <li>icon1</li>
  <li>icon2</li>
  <li>icon3</li>
  <li>icon4</li>
</ul>

Note! the is another way use flex but as I see it does not support old safari

Upvotes: 1

Related Questions