Safari rationale-content issue: flex-end; align-items: flex-end;

I'm developing a messenger for messaging, and I'm struggling to fix a few things in Safari, as this seems like a compatibility issue.

http://animgram.com/fb/index.html If you open this link in Google Chrome and Safari. Google Chrome is the correct view, but it does not display correctly in Safari.

I am trying to set this class.

.self { justify-content: flex-end; align-items: flex-end; } 

Please note: only problem with Safari. IE, Chrome and Firefox are fine.

+6
source share
1 answer

Safari <7.0 only has an implementation of the old Flexbox 2009 specification, which is very different from the current specification:

 .foo { display: -webkit-box; -webkit-box-pack: start; /* justify-content */ -webkit-box-align: start; /* align-items */ } 

This may be useful: https://gist.github.com/cimmanon/727c9d558b374d27c5b6

+15
source

Source: https://habr.com/ru/post/958604/


All Articles