4 almost identical blocks with given masks are created through inline svg located within the page body. I would like to clarify with knowledgeable people why through -webkit- the prefix data processing of the blocks occurs normally in all browsers that support this prefix, except for mobile safari? what am i missing

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>

Demo here

  • try -apple- || -khtml- prefixes - Lieutenant Jim Dangle
  • -apple-clip-path / -khtml-clip-path? - Kirill K
  • or Add xmlns = " w3.org/2000/svg " version = "1.1" for your svg tag - Lieutenant Jim Dangle
  • -apple- / -khtml- the result did not bring. everything is also shown, the first block is displayed, the next three are hidden, although they are present in HTML markup. I will try with xmlns - Kirill K
  • One more clarification, the problem is only with the part of the page being created, other blocks, above and below this part with links to the same svg files are displayed correctly. Could there be problems with scs selectors that are used to specify masks? <svg xmlns = " w3.org/2000/svg " ...> didn't bring any results - Kirill K

1 answer 1

To solve this problem, you should specify both the inline svg container itself and the clip-path inside the transform property: translateZ (0)! Important; through! important to avoid possible rewriting by other CCS selectors. codecode example

  /* свойства для свг контейнера */ #first_clipper_s { position: absolute; transform: translateZ(0) !important; } /* свойства для блока, на который накладывается свг */ @media all and (min-width: 0) and (max-width: 600px) { #prices #card1 { mask: url(#firstClip_s); clip-path: url(#firstClip_s); -apple-: url(#firstClip_s); -khtml-: url(#firstClip_s); -webkit-clip-path: url(#firstClip_s); -moz-clip-path: url(#firstClip_s); -o-clip-path: url(#firstClip_s); width: 100%; transform: translateZ(0) !important; } ... } 
 <!-- svg контейнер --> <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> <mask 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" /> </mask> </defs> </svg> <!-- блок на который накладывается свг для обрезки по контурам --> <div id="card1" class="prices cards z-depth-0 blue-grey darken-1 col s12 m3 l3 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> css: