Создаются 4 почти одинаковых по содержанию блока с заданными масками через инлайн свг, находящемся в пределах тела страницы. Хотелось бы уточнить у сведущих людей, почему через -webkit- префикс обработка данных блоков происходит нормально во всех поддерживающих данный префикс браузерах, кроме мобильного сафари? что я упускаю?
CSS:
.underline {
text-decoration: underline;
}
hr.white-hr {
border-top: 1px solid #fff;
width: 100%;
}
hr.blue-hr {
border-top: 1px solid #1976D2;
width: 100%;
}
.uppercase {
text-transform: uppercase;
}
#prices {
margin-top: 0;
padding-top: 5%;
overflow: hidden;
}
#prices .prices {
width: 24.5%;
margin: 0 0.25%;
overflow: hidden;
position: relative;
}
#prices .filter {
height: 100%;
width: 100%;
position: absolute;
background-color: rgba(13, 71, 161, .25);
background-repeat: repeat;
background-size: 375px;
z-index: 100;
opacity: .25;
}
#prices .circle-with-border {
z-index: 50;
height: 180px;
width: 180px;
vertical-align: middle;
border-radius: 50%;
background-color: #fff;
border: 3px solid #1976D2;
overflow: hidden;
}
#prices .circle-with-border img {
z-index: 50;
height: 100%;
width: 100%;
margin: 0;
}
#prices .old_price {
z-index: 50;
font-size: 1.25em;
text-decoration: line-through;
margin: 10px auto;
}
#prices .discount {
z-index: 50;
font-size: 1.5em;
margin: 10px auto;
}
#prices .cards .cards-action {
z-index: 50;
padding: 0;
border-top: none;
}
#prices .cards .cards-action a:not(.btn):not(.btn-large):not(.btn-floating) {
z-index: 50;
margin-right: 0;
width: 50%;
height: 30px;
margin: 15px 0;
line-height: normal;
float: left;
}
#prices .header {
z-index: 50;
font-size: 1.25em;
letter-spacing: 1px;
}
#prices .more {
z-index: 50;
font-size: 1.25em;
margin: 0;
height: 30px;
margin-right: 10px;
line-height: normal;
border-bottom: 1px dashed #fff;
}
#prices .to_form {
z-index: 50;
font-size: 1.25em;
margin: 0;
margin-left: 10px;
height: 30px;
line-height: normal;
border-bottom: 1px dashed #ffb74d;
}
/* svg masking */
#first_clipper_s,
#first_clipper_m,
#first_clipper_l,
#second_clipper_s,
#second_clipper_m,
#second_clipper_l {
width: 0;
height: 0;
margin: 0;
padding: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform-origin: 0;
}
@media all and (min-width: 0) and (max-width: 600px) {
#prices {
clip-path: url(#secondClip_s);
-webkit-clip-path: url(#secondClip_s);
-moz-clip-path: url(#secondClip_s);
-o-clip-path: url(#secondClip_s);
padding-bottom: 7.5%;
}
#prices .cards {
clip-path: url(#firstClip_s);
-webkit-clip-path: url(#firstClip_s);
-moz-clip-path: url(#firstClip_s);
-o-clip-path: url(#firstClip_s);
width: 100%;
}
}
@media all and (min-width: 601px) and (max-width: 991px) {
#prices {
clip-path: url(#secondClip_m);
-webkit-clip-path: url(#secondClip_m);
-moz-clip-path: url(#secondClip_m);
-o-clip-path: url(#secondClip_m);
padding-bottom: 7.5%;
}
#prices .cards {
clip-path: url(#firstClip_s);
-webkit-clip-path: url(#firstClip_s);
-moz-clip-path: url(#firstClip_s);
-o-clip-path: url(#firstClip_s);
width: 48%;
margin: 0 1%;
}
}
@media all and (min-width: 992px) {
#prices {
clip-path: url(#secondClip_l);
-webkit-clip-path: url(#secondClip_l);
-moz-clip-path: url(#secondClip_l);
-o-clip-path: url(#secondClip_l);
padding-bottom: 7.5%;
}
#prices .cards:nth-of-type(1),
#prices .cards:nth-of-type(3) {
clip-path: url(#firstClip_s);
-webkit-clip-path: url(#firstClip_s);
-moz-clip-path: url(#firstClip_s);
-o-clip-path: url(#firstClip_s);
min-height: 500px;
}
#prices .cards:nth-of-type(2),
#prices .cards:nth-of-type(4) {
clip-path: url(#secondClip_s);
-webkit-clip-path: url(#secondClip_s);
-moz-clip-path: url(#secondClip_s);
-o-clip-path: url(#secondClip_s);
min-height: 500px;
}
}
html:
<!-- container with cards -->
<div id="prices" class="grey">
<div class="container">
<div class="row">
<div class="col s12 info">
<h1 class="uppercase arvoBold white-text"> Blah-blah-blah</h1>
</div>
</div>
</div>
<div class="container container-wide">
<div class="row">
<div class="col s12 m3 l3 prices cards z-depth-0 blue-grey darken-1 flex-column">
<p class="uppercase arvoBold white-text header">
Very very very interesing header </p>
<hr class="blue-hr">
<div class="circle circle-with-border flex-row"><img src="http://lorempixel.com/800/800" class="responsive-img">
</div>
<p class="clearReg grey-text text-lighten-1 old_price">
some strike-thru text</p>
<p class="arvoBold amber-text text-lighten-2 discount">
alternative text</p>
<hr class="blue-hr">
<div class="cards-action">
<a href="#how_it_works">
<p class="white-text clearReg more">more</p>
</a>
<a href="#extended_form">
<p class="amber-text text-lighten-1 clearReg to_form">action</p>
</a>
</div>
</div>
<div class="col s12 m3 l3 prices cards z-depth-0 blue-grey darken-2 flex-column">
<p class="uppercase arvoBold white-text header">
another interesting text</p>
<hr class="blue-hr">
<div class="circle circle-with-border flex-row">
<img src="http://lorempixel.com/600/600" class="responsive-img">
</div>
<p class="clearReg grey-text text-lighten-1 old_price">
another strike text</p>
<p class="arvoBold amber-text text-lighten-2 discount">
another alternative</p>
<hr class="blue-hr">
<div class="cards-action">
<a href="#how_it_works">
<p class="white-text clearReg more">more</p>
</a>
<a href="#extended_form">
<p class="amber-text text-lighten-1 clearReg to_form">action</p>
</a>
</div>
</div>
<div class="col s12 m3 l3 prices cards z-depth-0 blue-grey darken-3 flex-column">
<p class="uppercase arvoBold white-text header">
one more interesting text</p>
<hr class="blue-hr">
<div class="circle circle-with-border flex-row">
<img src="http://lorempixel.com/400/400" class="responsive-img">
</div>
<p class="clearReg grey-text text-lighten-1 old_price">
one more strike text</p>
<p class="arvoBold amber-text text-lighten-2 discount">
one more alternative</p>
<hr class="blue-hr">
<div class="cards-action">
<a href="#how_it_works">
<p class="white-text clearReg more">more</p>
</a>
<a href="#extended_form">
<p class="amber-text text-lighten-1 clearReg to_form">text</p>
</a>
</div>
</div>
<div class="col s12 m3 l3 prices cards z-depth-0 blue-grey darken-4 flex-column">
<p class="uppercase arvoBold white-text header">
last one interesting header</p>
<hr class="blue-hr">
<div class="circle circle-with-border flex-row">
<img src="http://lorempixel.com/200/200" class="responsive-img">
</div>
<p class="clearReg grey-text text-lighten-1 old_price">
last strike text</p>
<p class="arvoBold amber-text text-lighten-2 discount">
last alternative text</p>
<hr class="blue-hr">
<div class="cards-action">
<a href="#how_it_works">
<p class="white-text clearReg more">more</p>
</a>
<a href="#extended_form">
<p class="amber-text text-lighten-1 clearReg to_form">action</p>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- svg masks -->
<svg id="first_clipper_l">
<defs>
<clipPath id="firstClip_l" clipPathUnits="objectBoundingBox">
<polygon points="1,0.15 0.85,0 0,0.15 0,0.85 0.15,1 1,0.85" />
</clipPath>
</defs>
</svg>
<!-- tablet-->
<svg id="first_clipper_m">
<defs>
<clipPath id="firstClip_m" clipPathUnits="objectBoundingBox">
<polygon points="1,0.1 0.9,0 0,0.1 0,0.9 0.1,1 1,0.9" />
</clipPath>
</defs>
</svg>
<!-- mobile-->
<svg id="first_clipper_s">
<defs>
<clipPath id="firstClip_s" clipPathUnits="objectBoundingBox">
<polygon points="1,0.025 0.975,0 0,0.025 0,0.975 0.025,1 1,0.975" />
</clipPath>
</defs>
</svg>
<svg id="second_clipper_l">
<defs>
<clipPath id="secondClip_l" clipPathUnits="objectBoundingBox">
<polygon points="1,0.15 0.15,0 0,0.15 0,0.85 0.85,1 1,0.85" />
</clipPath>
</defs>
</svg>
<!-- tablet-->
<svg id="second_clipper_m">
<defs>
<clipPath id="secondClip_m" clipPathUnits="objectBoundingBox">
<polygon points="1,0.1 0.1,0 0,0.1 0,0.9 0.9,1 1,0.9" />
</clipPath>
</defs>
</svg>
<!-- mobile-->
<svg id="second_clipper_s">
<defs>
<clipPath id="secondClip_s" clipPathUnits="objectBoundingBox">
<polygon points="1,0.025 0.025,0 0,0.025 0,0.975 0.975,1 1,0.975" />
</clipPath>
</defs>
</svg>