html - CSS 仅适用于 iOS 设备
问题描述
我在 iOS 设备上遇到了一个奇怪的渲染问题
这是网站 - https://anastmedvedeva.ru/
在 Chrome 中工作: https ://drive.google.com/file/d/1oHNFAXvjveIjXlYf-_Tnf22so8EEWsiq/view?usp=sharing
在 IOS 上工作:https ://drive.google.com/file/d/1zRWQ1ZRP0dYf3y2USntk-EEb4Xn6LkUp/view?usp=sharing
相关CSS:
.header__logo {
width: 400px;
padding-top: 20px;
}
.header__logo-link {
text-decoration: none;
color: #5f4832;
}
.logo__desc {
font-weight: 500;
font-size: 25px;
font-style: italic;
color: #5f4832;
}
/** smooth scrolling **/
.section__title {
padding-bottom: 20px;
font-size: 30px;
}
/* 1. Enable smooth scrolling */
html {
scroll-behavior: smooth;
font-family: "Montserrat", sans-serif;
}
/* 2. Make nav sticky */
main > .section-nav {
position: sticky;
top: 2rem;
-ms-flex-item-align: start;
-ms-grid-row-align: start;
align-self: start;
}
/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav .section-nav__item.active > a {
color: #829188;
font-weight: 500;
}
/* Sidebar Navigation */
.section-nav {
padding-left: 0;
border-left: 1px solid #5f4832;
}
.section-nav .section-nav__link {
text-decoration: none;
display: block;
padding: 0.125rem 0;
color: #5f4832;
-webkit-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out; /* This small transition makes setting of the active state smooth */
}
.section-nav .section-nav__link:hover,
.section-nav .section-nav__link:focus {
color: #829188;
}
/** Poor man's reset **/
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
background: #ddd4d1;
}
.section-nav__items {
list-style: none;
margin: 0;
padding: 0;
}
.section-nav__item {
margin-left: 1rem;
font-size: 20px;
}
/** page layout **/
main {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 10em;
grid-template-columns: 1fr 10em;
max-width: 100em;
width: 90%;
margin: 0 auto;
}
/** enlarge the sections for this demo, so that we have a long scrollable page **/
.section__title {
color: #5f4832;
}
.formenu {
font-size: 1px;
}
/** smooth scrolling end **/
@media screen and (min-width: 1080px) {
.burger__menu {
display: none;
}
}
@media screen and (max-width: 1080px) {
:root {
font-size: 14px;
}
.section-nav {
display: none;
}
header {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header__button {
z-index: 5;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #829188;
border: 0;
cursor: pointer;
position: fixed;
top: 23px;
right: 12px;
outline: none;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}
.header__button[data-open="true"] {
background-color: #ddd4d1;
-webkit-animation-name: scale;
animation-name: scale;
}
.header__button[data-open="false"] {
-webkit-transition: background-color 250ms linear;
-o-transition: background-color 250ms linear;
transition: background-color 250ms linear;
}
@-webkit-keyframes scale {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(100%);
transform: scale(100%);
}
}
@keyframes scale {
from {
-webkit-transform: scale(0);
transform: scale(0);
}
to {
-webkit-transform: scale(100%);
transform: scale(100%);
}
}
.header__nav {
background-color: #829188;
position: fixed;
overflow: hidden;
z-index: 4;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
visibility: hidden;
-webkit-clip-path: circle(var(--radius) at calc(100% - 55px) 47px);
clip-path: circle(var(--radius) at calc(100% - 55px) 47px);
list-style: none;
}
.header__nav[data-active="true"] {
visibility: visible;
}
.header__menu {
padding: 0;
margin: 0;
}
.header__menu > .header__menu-item {
font-size: 30px;
list-style: none;
}
.header__menu > .header__menu-item:not(:last-of-type) {
margin-bottom: 0.1em;
}
.header__menu-item a {
font-weight: bold;
color: #ddd4d1;
text-decoration: none;
list-style: none;
font-size: 30px;
}
.header__menu-item a:hover {
font-style: italic;
}
}
.header__pic {
width: 300px;
}
.logo__quote {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 50px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
blockquote {
margin: 0;
color: #231e28;
padding: 30px 30px 30px 60px;
border-left: 8px solid #d7ab8b;
position: relative;
background: #ddd4d1;
font-family: "Lato", sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: Arial;
color: #d7ab8b;
font-size: 70px;
position: absolute;
left: 15px;
top: 5px;
}
blockquote p {
font-style: italic;
font-size: 24px;
margin-top: 0;
}
blockquote cite {
font-style: italic;
font-size: 18px;
margin-top: 20px;
color: #988c8c;
}
/* О нас styles start */
.about {
padding-bottom: 40px;
}
.wrapper-full {
margin-bottom: 139px;
max-width: 1260px;
margin: 0 auto;
position: relative;
color: #5f4832;
padding: 0 15px;
}
.tours__tour {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 50px 1fr;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.about__desc {
text-align: justify;
margin: 0 auto;
max-width: 400px;
font-size: 23px;
line-height: 25px;
font-style: italic;
}
.about-pic {
max-width: 400px;
display: block;
margin: 0 auto;
border-radius: 12px;
}
.about__title {
text-align: center;
width: 100%;
font-weight: 500;
font-size: 27px;
line-height: 42px;
top: 0;
left: 0;
color: #5f4832;
padding-bottom: 20px;
font-style: italic;
}
/* О мастере styles end */
/* Портфолио*/
.grid-portfolio {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
grid-template-columns: repeat(3, 1fr);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0 10px;
width: 90%;
margin: 0 auto;
}
.grid-portfolio .portfolio__block {
display: inline-block;
border: solid 4px #829188;
padding: 5px;
border-radius: 10px;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
margin: 0 auto;
}
.grid-portfolio .portfolio__block:hover {
border-color: #988c8c;
}
.grid-portfolio .portfolio__block .portfolio-item {
width: 100%;
border-radius: 5px;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.grid-portfolio .portfolio__block .portfolio__desc {
margin: 5px 0;
padding: 0;
text-align: center;
font-style: italic;
}
.portfolio__desc {
font-size: 18px;
color: #829188;
}
.portfolio__desc:hover {
color: #988c8c;
}
.portfolio__block1 {
width: 350px;
}
.portfolio__block2 {
width: 200px;
}
.portfolio__block3 {
width: 200px;
}
/* Портфолио*/
/* myworks start*/
.myworks__section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.grid-container {
-webkit-columns: 5 200px;
-moz-columns: 5 200px;
columns: 5 200px;
-webkit-column-gap: 1.5rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
width: 90%;
margin: 0 auto;
}
.grid-container .myworks__img {
width: 150px;
margin: 0 1.5rem 1.5rem 0;
display: inline-block;
width: 100%;
background-color: #fbf2e1;
padding: 5px;
border-radius: 10px;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.grid-container .myworks__img img {
width: 100%;
border-radius: 5px;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.grid-container .myworks__img .myworks__desc {
margin: 5px 0;
padding: 0;
text-align: center;
font-style: italic;
color: #5f4832;
}
/*my works end*/
/* Отзывы styles start */
.reviews {
padding-bottom: 30px;
}
.reviews-wrapper {
padding: 0 15px;
max-width: 1260px;
margin: 0 auto;
position: relative;
color: #fbf2e1;
}
.carousel__title {
padding-bottom: 15px;
padding-top: 15px;
font-size: 20px;
font-weight: 700;
font-style: italic;
}
.carousel-desc {
font-size: 16px;
font-style: italic;
}
.carousel-wrapper {
height: 380px;
position: relative;
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
}
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 40px 50px;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.arrow {
border: solid #9e917a;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 12px;
}
.arrow-prev {
left: -30px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(135deg);
-ms-transform: translateY(-50%) rotate(135deg);
transform: translateY(-50%) rotate(135deg);
}
.arrow-next {
right: -30px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(-45deg);
-ms-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
}
@media (max-width: 480px) {
.arrow,
.light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
/*Select every element*/
[id^="item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
background: url(../img/reviews.svg);
background-size: cover;
border-radius: 12px;
}
.item-2,
.item-3,
.item-4,
.item-5,
.item-6,
.item-7,
.item-8,
.item-9,
.item-10 {
background: url(../img/reviews.svg);
background-size: cover;
border-radius: 12px;
}
*:target ~ .item-1 {
opacity: 0;
}
#item-1:target ~ .item-1 {
opacity: 1;
}
#item-2:target ~ .item-2,
#item-3:target ~ .item-3,
#item-4:target ~ .item-4,
#item-5:target ~ .item-5,
#item-6:target ~ .item-6,
#item-7:target ~ .item-7,
#item-8:target ~ .item-8,
#item-9:target ~ .item-9,
#item-10:target ~ .item-10 {
z-index: 2;
opacity: 1;
}
/* Отзывы styles end */
/* Обучение start */
.blog-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 1rem auto;
margin-bottom: 1.6%;
line-height: 1.4;
font-style: italic;
border-radius: 5px;
overflow: hidden;
z-index: 0;
}
.blog-card:hover .photo {
-webkit-transform: scale(1.3) rotate(3deg);
-ms-transform: scale(1.3) rotate(3deg);
transform: scale(1.3) rotate(3deg);
}
.blog-card .meta {
position: relative;
z-index: 0;
height: 200px;
}
.blog-card .photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
-o-transition: transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.blog-card .description {
padding: 1rem;
background: #988c8c;
position: relative;
z-index: 1;
}
.blog-card .description h1,
.blog-card .description h2 {
color: #fbf2e1;
}
.blog-card .description h1 {
line-height: 1;
margin: 0;
font-size: 25px;
}
.blog-card .description h2 {
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
color: #ddd4d1;
margin-top: 5px;
}
.blog-card .description .read-more {
text-align: right;
}
.blog-card .description .read-more a {
color: #dabc86;
display: inline-block;
position: relative;
text-decoration: none;
}
.blog-card p {
position: relative;
margin: 1rem 0 0;
color: #fbf2e1;
}
.blog-card p:first-of-type {
margin-top: 1.25rem;
}
.blog-card p:first-of-type:before {
content: "";
position: absolute;
height: 5px;
background: #dabc86;
width: 35px;
top: -0.75rem;
border-radius: 3px;
}
.blog-card:hover {
left: 0%;
}
@media (min-width: 200px) {
.blog-card {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 700px;
}
.blog-card .meta {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
height: auto;
}
.blog-card .description {
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
.blog-card .description:before {
-webkit-transform: skewX(-3deg);
-ms-transform: skewX(-3deg);
transform: skewX(-3deg);
content: "";
background: #988c8c;
width: 30px;
position: absolute;
left: -10px;
top: 0;
bottom: 0;
z-index: -1;
}
.blog-card.alt {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.blog-card.alt .description:before {
left: inherit;
right: -10px;
-webkit-transform: skew(3deg);
-ms-transform: skew(3deg);
transform: skew(3deg);
}
}
.study__desc {
margin: 0 auto;
color: #5f4832;
font-style: italic;
font-size: 20px;
}
.cat {
position: relative;
width: 100%;
max-width: 20em;
overflow: hidden;
background-color: #ddd4d1;
}
.cat::before {
content: "";
display: block;
padding-bottom: 100%;
}
.cat:active > * {
-webkit-animation-play-state: running;
animation-play-state: running;
}
.cat__head,
.cat__tail,
.cat__body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93)
infinite;
animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.18, 0.65) infinite;
}
.cat__head::before,
.cat__tail::before,
.cat__body::before {
content: "";
position: absolute;
width: 50%;
height: 50%;
background-size: 200%;
background-repeat: no-repeat;
background-image: url("../img/cat.png");
}
.cat__head::before {
top: 0;
right: 0;
background-position: 100% 0%;
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.cat__tail {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.cat__tail::before {
left: 0;
bottom: 0;
background-position: 0% 100%;
-webkit-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.cat__body {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.cat__body:nth-of-type(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.cat__body::before {
right: 0;
bottom: 0;
background-position: 100% 100%;
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes rotating {
from {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #ddd4d1;
width: 200px;
margin: 0 auto;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.study {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
line-height: 1.4;
}
/* Обучение end */
/* Цена start*/
.price__content {
padding: 0;
margin: 0;
list-style: none;
}
.price__content:hover .cute-bit {
opacity: 0.5;
}
.price__content:hover .cute-bit:hover {
opacity: 1;
}
.price__pic {
border-radius: 10px;
}
.ancatomy {
position: relative;
text-align: center;
font-size: 1vw;
font-style: italic;
}
.ancatomy img {
display: block;
width: 350px;
margin: 0 auto;
opacity: 0.5;
}
.ancatomy .cute-bit {
position: absolute;
min-width: 15em;
-webkit-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.ancatomy .cute-bit:hover {
min-width: 21em !important;
}
.price1 {
color: #dabc86;
font-size: 20px;
-webkit-filter: drop-shadow(0px 4px 4px #fffdfd);
filter: drop-shadow(0px 4px 4px #fffdfd);
}
.price2 {
color: #8ca6af;
font-size: 20px;
-webkit-filter: drop-shadow(0px 4px 4px #fffdfd);
filter: drop-shadow(0px 4px 4px #fffdfd);
}
.price3 {
color: #d7ab8b;
font-size: 20px;
-webkit-filter: drop-shadow(0px 4px 4px #fffdfd);
filter: drop-shadow(0px 4px 4px #fffdfd);
}
.ancatomy .cute-bit.grow-left h2 {
padding-right: 1em;
}
.ancatomy .cute-bit.grow-left h2:after {
right: 0;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.ancatomy .cute-bit.grow-right h2 {
padding-left: 1em;
}
.ancatomy .cute-bit.grow-right h2:after {
left: 0;
-webkit-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.ancatomy .cute-bit h2 {
position: relative;
padding: 0 0 0.4em;
margin: 0 0 0.4em;
}
.ancatomy .cute-bit p {
margin: 0;
padding: 0;
}
.ancatomy .cute-bit.cute-ears {
right: 55%;
top: 5%;
}
.ancatomy .cute-bit.cute-eyes {
right: 50%;
top: 70%;
width: 400px;
}
.ancatomy .cute-bit.cute-paws {
left: 58%;
bottom: 35%;
width: 350px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Цена end*/
/* contacts start*/
.contacts {
padding-bottom: 30px;
}
.square__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #ddd4d1;
}
.square {
position: relative;
margin: 0 10px;
width: 300px;
height: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #5f4832;
border-radius: 32% 58% 69% 43% / 48% 32% 59% 55%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-animation: animate 6s linear infinite;
animation: animate 6s linear infinite;
}
.phone:hover span:nth-child(1) {
border: none;
background: #8ca6af;
}
.instagram:hover span:nth-child(1) {
border: none;
background: #d7ab8b;
}
.vk:hover span:nth-child(1) {
border: none;
background: #fbf2e1;
}
.square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #5f4832;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-animation: animate 4s linear infinite;
animation: animate 4s linear infinite;
}
.phone:hover span:nth-child(2) {
border: none;
background: #8ca6af;
}
.instagram:hover span:nth-child(2) {
border: none;
background: #d7ab8b;
}
.vk:hover span:nth-child(2) {
border: none;
background: #fbf2e1;
}
.square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #5f4832;
border-radius: 31% 45% 74% 35% / 38% 56% 51% 87%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-animation: animate2 10s linear infinite;
animation: animate2 10s linear infinite;
}
.phone:hover span:nth-child(3) {
border: none;
background: #8ca6af;
}
.instagram:hover span:nth-child(3) {
border: none;
background: #d7ab8b;
}
.vk:hover span:nth-child(3) {
border: none;
background: #fbf2e1;
}
.contacts__content {
position: relative;
padding: 40px 60px;
color: #5f4832;
text-align: center;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
font-style: italic;
}
.contacts__content .contacts__link {
position: relative;
display: inline-block;
margin-top: 10px;
border: 2px solid #5f4832;
padding: 6px 8px;
text-decoration: none;
color: #5f4832;
font-weight: 600;
border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%;
}
.contacts__content .contacts__link:hover {
background: #dabc86;
color: #333;
border: 2px solid #dabc86;
}
@-webkit-keyframes animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes animate2 {
0% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes animate2 {
0% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.contacts__title {
margin-bottom: 40px;
}
/* contacts end*/
缩放页面时,会打开一个菜单,我无法删除(在 iPhone 上),在 iPad 上,菜单会立即占据整个屏幕,并且不会在任何地方消失。
我已经通过浏览器堆栈测试了各种手机型号,这绝对是一个 iOS 问题,它没有发生在 android 上,也没有发生在 windows 或 MacOS 上
解决方案
推荐阅读
- python - 使用循环网络的电影评论分类
- flutter - Fluuter build apk:无法解析配置“:classpath”的所有工件
- conditional-statements - 条件中的 SQL 条件
- registry - 在 Inno Setup 中获取注册表项的所有权
- python - 真实世界信号的 Python 包络
- webpack-dev-server - Webpack 5:为什么 MiniCssExtractPlugin.loader 不让 HMR 工作?
- crud - 为所有 DateTimeField 设置默认 view_timezone
- git - Azure DevOps 上的拉取请求以强制替换而不是合并
- c++ - 用于颜色的 C++ constexpr 构造函数
- azure - 不支持 Azure Functions CRON 表达式?