Как побороть баг с flex-wrap в Safari?

Question

[Станислав Ботев]

Проблема такая: есть сайт, который нормально отображается в мобильных браузерах, окромя Safari для iPhone. Прочитал на flexbug описание, решил править проблему, однако проверить свой код нигде не могу - iPhone у меня нет, попросить не у кого. Как править этот баг без визуальной проверки на правильность вёрстки?

Есть несколько блоков, которые имеют flex-wrap: wrap. Приведу один них для примера.

.block--6 {
    	display: -webkit-box;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	flex-direction: column;
    	-webkit-box-align: center;
    	align-items: center;
    	-webkit-box-pack: center;
    	justify-content: center;
    	width: 100vw;
    	height: 100%;
    	color: #fff;
    	background-color: #fcb51d; }
    @media screen and (max-width: 568px) {
    	.block--6 {
    		height: 100%; } }
    .block--6 h2 {
    	font-family: Bold;
    	text-align: center;
    	font-size: 2.5em;
    	margin: 5vh 0 5vh 0; }
    .block--6__what {
    	display: -webkit-box;
    	display: flex;
    	-webkit-box-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	align-items: center;
    	flex-wrap: wrap;
    	margin-bottom: 5vh; }
    @media screen and (max-width: 568px) {
    	.block--6__what {
    		-webkit-box-orient: vertical;
    		-webkit-box-direction: normal;
    		flex-direction: column; } }
    .block--6__what .what__that {
    	display: -webkit-box;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	flex-direction: column;
    	-webkit-box-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	align-items: center;
    	height: 30vh;
    	width: 25vw; }
    @media screen and (max-width: 568px) {
    	.block--6__what .what__that {
    		height: 100%; } }
    .block--6__what .what__that p {
    	color: #fff;
    	font-size: .9em;
    	text-align: center; }
    @media screen and (max-width: 568px) {
    	.block--6__what .what__that p {
    		font-size: 1em;
    		width: 90vw; } }
    .block--6__what .what__that .that__circle {
    	display: -webkit-box;
    	display: flex;
    	-webkit-box-pack: center;
    	justify-content: center;
    	-webkit-box-align: center;
    	align-items: center;
    	width: 10vw;
    	height: 10vw;
    	border-radius: 50%;
    	background-color: #ffc256; }
    @media screen and (max-width: 568px) {
    	.block--6__what .what__that .that__circle {
    		width: 33vw;
    		height: 33vw; } }
    .block--6__what .what__that .that__circle img {
    	max-width: 100%; }
    @media screen and (max-width: 568px) {
    	.block--6__what .what__that .that__circle img {
    		max-width: 60%; } }

<div class="block--6">
        <h2>ЧТО ВЫ ПОЛУЧАЕТЕ, ОБРАТИВШИСЬ К НАМ?</h2>
        <div class="block--6__what">
            <div class="what__that">
                <div class="that__circle">
                    <img src="http://mysolaris.xyz/octoland/icons/tube.png">
                </div>
                <p>Видеоролик, увеличивающий продажи и генерирующий трафик на сайт</p>
            </div>
            <div class="what__that">
                <div class="that__circle">
                    <img src="http://mysolaris.xyz/octoland/icons/presentation.png">
                </div>
                <p>Продвижение на площадках, где обитают ваши покупатели</p>
            </div>
            <div class="what__that">
                <div class="that__circle">
                    <img src="http://mysolaris.xyz/octoland/icons/list.png">
                </div>
                <p>Долгосрочную стратегию работы с видеоконтентом</p>
            </div>
        </div>
    </div>

Answer 1

[Роман Мисюра]

https://www.browserstack.com/ - но платно. Как вариант попробовать использовать эмуляторы или виртуальную машину а на ней макось.

По флексбоксам вроде сафари единственный кто придерживаются правил документации.

Comments

[Максим Софронов]

можно и бесплатно, но функционал ограничен