CSS Вертикальный аккордеон работает на Chrome iOS, но не на Safari iOS ⇐ CSS

[Anonymous]

Я разрабатываю веб-сайт, используя этот открытый исходный код от CodePen.
Потратив неделю на работу над ним, я понял, что эти вертикальные слайды-гармошки не работают с Safari iOS (хотя они работают). на Chrome iOS).
Как ни странно, он работает на настольном Chrome И Safari.
Может ли кто-нибудь помочь мне сделать это совместимым с Safari iOS?
Я рад отправить совет за помощь.
Спасибо вы.
При ссылке на CodePen необходимо опубликовать код, так что вот (если вы посмотрите на сайте CodePen, вверху есть раздел комментариев, который не публикуется ниже). ):
.T73auXqB6A1R7oKOBA8BDesP {
width: 100%;
height: 50vh; /* = free var 'height', need this to clip empty space at the bottom! */
overflow: hidden;
border-radius: 0.5rem;
box-shadow: 5px 3px 3px rgba(0,0,0,0.3),5px -3px 3px rgba(0,0,0,0.3);
/* '5px' comes from free var 'accordion-gutter' */
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 {
height: 100vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 {
height: 90vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 {
height: 80vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 {
height: 70vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 {
height: 60vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 {
height: 50vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 {
height: 40vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 {
height: 30vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 {
height: 20vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 {
height: 10vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 {
height: 0;
}
.T73auXqB6A1R7oKOBA8BDesP > ul {
list-style: none;
width: 32%; /* = 'slides' * 'tab-width' or, leave it fixed! ('.T73auXqB6A1R7oKOBA8BDesP.open' resets it to 100%) */
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
transition: all 500ms ease; /* need this when we are entering vertically! */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li {
display: table-cell;
vertical-align: top;
position: relative;
/* need this to stop rapid opening of all subsequent slides when entering vertically! */
overflow: hidden;
-ms-transform: translate(0,0); /* need this to apply 'position: fixed;' of navigation buttons! */
-webkit-transform: translate(0,0);
transform: translate(0,0);
transition: all 500ms ease; /* need this when we jump from slide to slide! */
background-color: #bfbfbf; /* free var 'accordion-back-color' */
padding: 0 0 0 5px; /* free var 'accordion-gutter' */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div {
display: inline-block; /* might need this if '.accordion-text' is absolute! */
width: 100%; /* goes with previous! */
height: 50vh; /* = free var 'height' */
overflow: hidden;
border: 2px solid #808080; /* = free var 'border' */
border-radius: 10px; /* = free var 'radius' */
background-color: #666; /* free var 'tab-back-color' */
/* need this if you have absolute positioned child nodes; also need it to
activate scrolling on those nodes! Side-effect: animation scrollbars in
relation with the 'scroll' class! Do NOT replace with 'translate(0,0)' as
the side effect is in navigation buttons that become un-fixed! */
position: relative;
background-position: left top; /* free var 'img-position' for background images */
background-size: cover; /* might need this for background images */
background-repeat: no-repeat; /* might need this for background images */
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 > ul > li > div {
height: 100vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 > ul > li > div {
height: 90vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 > ul > li > div {
height: 80vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 > ul > li > div {
height: 70vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 > ul > li > div {
height: 60vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 > ul > li > div {
height: 50vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div {
height: 40vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 > ul > li > div {
height: 30vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 > ul > li > div {
height: 20vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 > ul > li > div {
height: 10vh;
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 > ul > li > div {
height: 0;
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > :not([class*="accordion-text"]) {
display: none;
}
.T73auXqB6A1R7oKOBA8BDesP:not([class*="hover"]) > ul > li:hover > div {
background-color: #868686; /* free var 'tab-hover-back-color' */
}

/*
* Hover control class
* -------------------
*/
.T73auXqB6A1R7oKOBA8BDesP.hover > ul:hover {
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul:hover > li {
width: 8%; /* = free var 'tab-width' */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover {
width: 80%; /* = 100 - ('slides' - 1) * 'tab-width' or, leave it fixed! */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: center;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > :not([class*="accordion-text"]) {
display: block;
}

/*
* Open control class
* ------------------
*/
.T73auXqB6A1R7oKOBA8BDesP.open > ul {
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li {
width: 8%; /* = free var 'tab-width' */
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li.open {
width: 80%; /* = 100 - ('slides' - 1) * 'tab-width' or, leave it fixed! */
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li.open > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: center;
}
.T73auXqB6A1R7oKOBA8BDesP.open > ul > li.open > div > :not([class*="accordion-text"]) {
display: block;
}

/*
* Scroll control class
* --------------------
* Side-effect: animation scrollbars.
* Solution: use js to apply inline style on animation start 'overflow: hidden;'
* and on animation end remove that style!
*/
.T73auXqB6A1R7oKOBA8BDesP.hover.scroll > ul > li:hover > div,
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li.scroll:hover > div,
.T73auXqB6A1R7oKOBA8BDesP.scroll > ul > li.open > div,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open.scroll > div {
overflow: auto;
}

/*
* Accordion text
* --------------
* It contains title used in tabs and body used when slide is displayed.
* Uses 'pYLEi1aS9dFRUWLSptPEh7ov' for centering.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-text {
position: absolute; /* might need this */
z-index: 100;
padding: 0;
height: 50vh; /* = free var 'height', this is critical! */
width: 50vh; /* = free var 'height', this is critical! */
margin: 0 0 0 calc(-25vh + 50%); /* = calc(-'height'/2px + 50%), this is critical! */
transition: all 500ms ease; /* might need this for 'accordion-text' animation on slide opening */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.T73auXqB6A1R7oKOBA8BDesP.h-100 > ul > li > div > .accordion-text {
height: 100vh;
width: 100vh;
margin: 0 0 0 calc(-50vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-90 > ul > li > div > .accordion-text {
height: 90vh;
width: 90vh;
margin: 0 0 0 calc(-45vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-80 > ul > li > div > .accordion-text {
height: 80vh;
width: 80vh;
margin: 0 0 0 calc(-40vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-70 > ul > li > div > .accordion-text {
height: 70vh;
width: 70vh;
margin: 0 0 0 calc(-35vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-60 > ul > li > div > .accordion-text {
height: 60vh;
width: 60vh;
margin: 0 0 0 calc(-30vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-50 > ul > li > div > .accordion-text {
height: 50vh;
width: 50vh;
margin: 0 0 0 calc(-25vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div > .accordion-text {
height: 40vh;
width: 40vh;
margin: 0 0 0 calc(-20vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-40 > ul > li > div > .accordion-text {
height: 40vh;
width: 40vh;
margin: 0 0 0 calc(-20vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-30 > ul > li > div > .accordion-text {
height: 30vh;
width: 30vh;
margin: 0 0 0 calc(-15vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-20 > ul > li > div > .accordion-text {
height: 20vh;
width: 20vh;
margin: 0 0 0 calc(-10vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-10 > ul > li > div > .accordion-text {
height: 10vh;
width: 10vh;
margin: 0 0 0 calc(-5vh + 50%);
}
.T73auXqB6A1R7oKOBA8BDesP.h-0 > ul > li > div > .accordion-text {
height: 0;
width: 0;
margin: 0;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text {
/*position: static;*/
width: 100%;
height: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.hover.no-open-text > ul > li:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li.no-open-text:hover > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.no-open-text > ul > li.open > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open.no-open-text > div > .accordion-text {
display: none;
}

/*
* Accordion title
* ---------------
* It is used as tab and slide title.
* Uses 'pYLEi1aS9dFRUWLSptPEh7ov' for centering.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-text .accordion-title {
font-size: 2.5rem;
color: black; /* free var 'tab-title-font-color */
text-shadow: 2px 2px rgba(255, 255, 255, .5);
margin: 0;
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text .accordion-title,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text .accordion-title {
display: inline-block; /* might need this to contract background color around title */
font-size: 3rem;
color: white; /* free var 'title-font-color' */
text-shadow: 2px 2px rgba(0, 0, 0, .5);
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}

/*
* Accordion body
* --------------
* It is used as text in slides.
* Uses 'pYLEi1aS9dFRUWLSptPEh7ov' for centering.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-text .accordion-body {
display: none;
color: white; /* free var 'body-font-color */
text-align: justify;
padding: 0 10px;
margin: 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.4); /* free var 'body-back-color' */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-text .accordion-body,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-text .accordion-body {
display: block;
}

/*
* Accordion images
* ----------------
* It is used in slides below accordion text and navigation arrows.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-img {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block; /* need this to always show images */
width: auto;
height: 100%; /* need this to fill tab vertically dictated by free var 'img-position' */
}
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li:hover > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open > div > .accordion-img {
width: 100%;
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.hover.img-cover > ul > li:hover > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.hover > ul > li.img-cover:hover > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.img-cover > ul > li.open > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP > ul > li.open.img-cover > div > .accordion-img {
height: 100%;
object-fit: cover;
}

/*
* Background images
* -----------------
* Adjust it for your project.
*/
/*
.T73auXqB6A1R7oKOBA8BDesP > ul > li:nth-child(1) > div {
background-image: url("https://source.unsplash.com/user/alexag ... Hg/450x200");
}
*/

/*
* Accordion navigation
* --------------------
* It is used in slides for navigation.
*/
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav {
position: fixed;
z-index: 200;
width: 100%; /* need this to expand fully inside the parent! */
top: 50%; /* need this to center the container! */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a {
/* you can't use one big navigation area as it blocks scrolling when mouse is
over it! So, we break them to 2 small anchor areas! */
position: absolute;
font-size: 50px;
line-height: 50px;
width: 50px;
text-align: center;
color: #ddd;
cursor: pointer;
transition: all 250ms ease;
transform: translateY(-50%); /* need this to center this child in the container! */
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a:nth-child(1) {
left: 0px;
}
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a:nth-child(2) {
right: 9px; /* = 'accordion-gutter' + 'border' + 2px */
}
/* hover */
.T73auXqB6A1R7oKOBA8BDesP > ul > li > div > .accordion-nav a:not([class*="disabled"]):hover {
color: white;
}
/* 'fix-nav-scroll-overlap' */
.T73auXqB6A1R7oKOBA8BDesP.fix-nav-scroll-overlap > ul > li > div > .accordion-nav a:nth-child(2) {
right: 22px; /* = 'accordion-gutter' + 'border' + 2px + 13px for scrollbars */
}
/* 'nav-circle', 'nav-square' */
.T73auXqB6A1R7oKOBA8BDesP.nav-circle > ul > li > div > .accordion-nav a {
border-radius: 50px;
}
.T73auXqB6A1R7oKOBA8BDesP.nav-circle > ul > li > div > .accordion-nav a,
.T73auXqB6A1R7oKOBA8BDesP.nav-square > ul > li > div > .accordion-nav a {
background-color: rgba(0, 0, 0, 0.2); /* free var 'nav-back-color' */
}
.T73auXqB6A1R7oKOBA8BDesP.nav-circle > ul > li > div > .accordion-nav a:not([class*="disabled"]):hover,
.T73auXqB6A1R7oKOBA8BDesP.nav-square > ul > li > div > .accordion-nav a:not([class*="disabled"]):hover {
background-color: rgba(0, 0, 0, 0.4); /* free var 'nav-hover-back-color' */
}
/* 'nav-top' */
.T73auXqB6A1R7oKOBA8BDesP.nav-top > ul > li > div > .accordion-nav {
top: 0%;
}
.T73auXqB6A1R7oKOBA8BDesP.nav-top > ul > li > div > .accordion-nav a {
transform: translateY(2px); /* = `border` */
}
/* 'nav-bottom' */
.T73auXqB6A1R7oKOBA8BDesP.nav-bottom > ul > li > div > .accordion-nav {
top: auto;
bottom: 9px; /* = 'accordion-gutter' + 'border' + 2px */
}
.T73auXqB6A1R7oKOBA8BDesP.nav-bottom > ul > li > div > .accordion-nav a {
transform: translateY(-100%);
}

/* Reset for low width screens */
/* max width: 600px */
@media screen and (max-width: 600px) {
/* Basic code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 {
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > :not([class*="accordion-text"]) {
display: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li {
display: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: center;
}

/* Hover, open control classes */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.open > ul > li.open {
width: 100%;
}

/* Scroll control class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.scroll > div {
overflow: auto;
}

/* Accordion text */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-text {
/*position: static;*/
width: 100%;
height: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.no-open-text > div > .accordion-text {
display: none;
}

/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-text .accordion-title {
display: inline-block; /* might need this to contract background color around title */
font-size: 3rem;
color: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}

/* Accordion body */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-text .accordion-body {
display: block;
}

/* Accordion images */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-img {
width: 100%;
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li.img-cover > div > .accordion-img {
height: 100%;
object-fit: cover;
}

/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-600.open > ul > li.open > div > .accordion-nav {
display: none;
}
}
/* max width: 500px */
@media screen and (max-width: 500px) {
/* Basic code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 {
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > :not([class*="accordion-text"]) {
display: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li {
display: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: center;
}

/* Hover, open control classes */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.open > ul > li.open {
width: 100%;
}

/* Scroll control class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.scroll > div {
overflow: auto;
}

/* Accordion text */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-text {
/*position: static;*/
width: 100%;
height: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.no-open-text > div > .accordion-text {
display: none;
}

/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-text .accordion-title {
display: inline-block; /* might need this to contract background color around title */
font-size: 3rem;
color: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}

/* Accordion body */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-text .accordion-body {
display: block;
}

/* Accordion images */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-img {
width: 100%;
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li.img-cover > div > .accordion-img {
height: 100%;
object-fit: cover;
}

/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-500.open > ul > li.open > div > .accordion-nav {
display: none;
}
}
/* max width: 400px */
@media screen and (max-width: 400px) {
/* Basic code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 {
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > :not([class*="accordion-text"]) {
display: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li {
display: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: center;
}

/* Hover, open control classes */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.open > ul > li.open {
width: 100%;
}

/* Scroll control class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.scroll > div {
overflow: auto;
}

/* Accordion text */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-text {
/*position: static;*/
width: 100%;
height: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.no-open-text > div > .accordion-text {
display: none;
}

/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-text .accordion-title {
display: inline-block; /* might need this to contract background color around title */
font-size: 3rem;
color: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}

/* Accordion body */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-text .accordion-body {
display: block;
}

/* Accordion images */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-img {
width: 100%;
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li.img-cover > div > .accordion-img {
height: 100%;
object-fit: cover;
}

/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-400.open > ul > li.open > div > .accordion-nav {
display: none;
}
}
/* max width: 300px */
@media screen and (max-width: 300px) {
/* Basic code */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 {
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > :not([class*="accordion-text"]) {
display: block;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li {
display: block;
width: 100%;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300:not([class*="hover"]) > ul > li:hover > div {
background-color: #e9e9e9; /* free var 'slide-back-color' */
background-position: center;
}

/* Hover, open control classes */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.hover > ul:hover > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.hover > ul > li:hover,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.open > ul > li,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.open > ul > li.open {
width: 100%;
}

/* Scroll control class */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.scroll > ul > li > div,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.scroll > div {
overflow: auto;
}

/* Accordion text */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-text {
/*position: static;*/
width: 100%;
height: 100%;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.no-open-text > ul > li > div > .accordion-text,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.no-open-text > div > .accordion-text {
display: none;
}

/* Accordion title */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-text .accordion-title {
display: inline-block; /* might need this to contract background color around title */
font-size: 3rem;
color: white; /* free var 'title-font-color' */
padding: 5px 10px;
text-shadow: 2px 2px rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.4); /* free var 'title-open-back-color' */
}

/* Accordion body */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-text .accordion-body {
display: block;
}

/* Accordion images */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-img {
width: 100%;
height: auto;
}
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.img-cover > ul > li > div > .accordion-img,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li.img-cover > div > .accordion-img {
height: 100%;
object-fit: cover;
}

/* Accordion navigation */
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300 > ul > li > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.hover > ul > li:hover > div > .accordion-nav,
.T73auXqB6A1R7oKOBA8BDesP.reset-max-300.open > ul > li.open > div > .accordion-nav {
display: none;
}
}

/**
* pYLEi1aS9dFRUWLSptPEh7ov
* ========================
* Centers elements horizontally & vertically.
* Ex.:
* ...
* ...
*
*/
.pYLEi1aS9dFRUWLSptPEh7ov {
display: table;
table-layout: fixed;
width: 100%;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .centered,
.pYLEi1aS9dFRUWLSptPEh7ov > .north,
.pYLEi1aS9dFRUWLSptPEh7ov > .south {
display: table-cell;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .centered {
text-align: center;
vertical-align: middle;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .north {
text-align: center;
vertical-align: top;
}
.pYLEi1aS9dFRUWLSptPEh7ov > .south {
text-align: center;
vertical-align: bottom;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... safari-ios