#css #svg #safari #clip-path
Вопрос:
Я использую путь клипа svg для создания маски, которая на мобильном устройстве переполняет свой контейнер на фиксированную ширину пикселя. На мобильном устройстве этот контейнер находится на одном уровне с вертикальными краями окна просмотра, поэтому желаемый эффект заключается в том, что обрезанное изображение перемещается как влево, так и вправо от окна просмотра.
В firefox и chrome код, который я написал, хорошо работает, однако в Safari, похоже, есть взаимодействие overflow: hidden .
Следующий код объясняет это лучше всего, в данном случае я установил ширину раздела 400 пикселей, чтобы имитировать ширину экрана. Если вы откроете этот код вырезанным в Firefox и Chrome, код будет работать идеально, однако в Safari обрезанное изображение привязано между краями «окна просмотра». Есть ли какой-либо способ заставить обрезанное изображение выйти за пределы контейнера, скрывая переполненное содержимое?
section {
position: relative;
width: 400px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
/* Changing overflow to visible gives desired effect apart from the overflow not being clipped */
/* overflow: visible; */
border: 1px solid red;
}
figure {
margin-left: -150px;
margin-right: -150px;
width: calc(100% 300px);
height: 100%;
}
div {
background:url(https://picsum.photos/2000/1000?image=1069) center no-repeat;
clip-path: url(#overlay-clip);
-webkit-clip-path: url("#overlay-clip");
width: 100%;
height: 100%;
} <section>
<figure>
<div>
</div>
</figure>
</section>
<svg width="0" height="0">
<clipPath id="overlay-clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00089047195, 0.00178571428)" d="M561.490925 560c-.293288 0-.62491-.008736-.994142-.026062-.070349-.004215-.136781-.007594-.204373-.011238-.31743-.015917-.66661-.039172-1.042005-.06843-.092201-.008655-.177676-.015555-.264455-.022755l.010365.002366c-.412269-.034002-.854177-.074794-1.325199-.122269l-.013422-.003197a92.890823 92.890823 0 0 1-.184381-.018836l.013039.003222c-24.24249-2.492667-123.018479-22.100899-228.132231-45.129076-1.606552-.352154-3.215965-.705189-4.826617-1.058975-1.074535-.235909-2.148737-.472093-3.223417-.708597-1.190222-.261989-2.381524-.5244-3.573315-.787182a8131.510993 8131.510993 0 0 1-2.522405-.556599 8315.976609 8315.976609 0 0 1-4.538406-1.003371c-.841104-.186323-1.682394-.372712-2.523796-.559259-1.08599-.240602-2.171938-.48157-3.257998-.722789-4.519895-1.004178-9.042503-2.012634-13.561723-3.024338-1.046644-.233836-2.092877-.468249-3.138862-.702823-1.134674-.254994-2.269361-.509736-3.403672-.76465-1.369678-.307211-2.738607-.6152-4.106839-.923412-.784223-.177316-1.569371-.354319-2.35426-.531389-1.246045-.280395-2.490558-.561449-3.73431-.84265-.875436-.198702-1.751085-.396852-2.626317-.595068-93.026025-21.065294-181.33866-42.864655-217.756007-55.923117l.021827.00352c-.449605-.161063-.891324-.320796-1.325067-.479183l-.01994-.003314c-.402534-.147141-.79818-.293119-1.186863-.43792l.01693.002661c-.54822-.204019-1.08263-.4057-1.603029-.605005l-.017858-.003692c-.323323-.123975-.641222-.247031-.953649-.369158l.01652.003624c-.59217-.23119-1.164738-.459049-1.717374-.683512l-.010117-.001924a118.511716 118.511716 0 0 1-.450933-.184452c-.65704-.272016-1.292973-.540641-1.898-.80398-.036916-.014943-.071875-.030204-.10673-.045448-.652104-.285952-1.269112-.565191-1.848793-.838023-.016317-.007604-.031552-.014792-.04676-.021975-2.399772-1.131962-4.1557-2.153703-5.210037-3.053481C11.688401 416.036836 0 301.872305 0 279.984868c0-21.85112 11.6884-136.021704 37.866304-158.363112C64.280154 99.05639 530.261358 0 561.490925 0h.01815c31.229567 0 497.210775 99.05639 523.624625 121.621756C1111.3116 143.963164 1123 258.133748 1123 279.984868c0 21.887437-11.6884 136.051968-37.8663 158.393376-1.05434.899778-2.81027 1.921519-5.21127 3.054002-.01398.006662-.02921.01385-.04447.021042-.58074.273244-1.19775.552483-1.8513.837974-.03341.015705-.06837.030966-.10343.046246-.60688.263002-1.24281.531627-1.90904.805417-.13961.059452-.28993.120937-.44175.182678l-.01011.001924c-.55264.224463-1.12521.452322-1.71738.683512l.01652-.003624c-.31242.122127-.63032.245183-.95365.369158l-.01786.003692c-.52039.199305-1.0548.400986-1.60302.605005l.01693-.002661c-.38869.144801-.78433.290779-1.18687.43792l-.01994.003314c-.43374.158387-.87546.31812-1.32506.479183l.02182-.00352c-36.41734 13.058462-124.729979 34.857823-217.755104 55.923718-.876132.197615-1.751781.395765-2.627807.593843-1.243162.281825-2.487675.562879-3.732837.843764-.785772.17658-1.57092.353583-2.356297.530513-1.367078.308598-2.736007.616587-4.105485.924326-1.134511.254386-2.269198.509128-3.404177.76368-1.04568.235016-2.091913.469429-3.138327.703668-4.51945 1.011301-9.042058 2.019757-13.562719 3.023894-1.085294.24126-2.171242.482228-3.257003.722933-.841631.186444-1.682921.372833-2.524064.559055-1.513404.335139-3.026372.669641-4.538666 1.003567a9669.365611 9669.365611 0 0 1-2.521931.556481 8938.173235 8938.173235 0 0 1-3.573983.787234c-1.074187.236475-2.148389.472659-3.22204.70851-1.611536.353844-3.220949.706879-4.828879 1.059114-105.112374 23.028096-203.888363 42.636328-228.130853 45.128995l.013039-.003222a92.890823 92.890823 0 0 1-.184381.018836l-.013422.003197c-.471022.047475-.91293.088267-1.325199.122269l.010365-.002366a57.018152 57.018152 0 0 1-.256421.020701c-.383429.031312-.732609.054567-1.055139.071733-.062492.002395-.128924.005774-.194191.008887-.374314.018428-.705936.027164-.999224.027164h-.01815Z"/>
</clipPath>
</svg> Ответ №1:
Похоже, это ошибка в Safari. У меня у самого была проблема, и я исправил ее, принудив аппаратное ускорение браузера, т. Е. Мне пришлось обратиться transform: translateZ(0); к родителю обрезанного элемента. Что касается того, почему это происходит — я не смог выяснить, почему, так что это просто решение.
Для демонстрации я скопировал код из исходного примера и применил исправление, чтобы любой мог увидеть эффект.
section {
position: relative;
width: 400px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
/* Changing overflow to visible gives desired effect apart from the overflow not being clipped */
/* overflow: visible; */
border: 1px solid red;
}
figure {
margin-left: -150px;
margin-right: -150px;
width: calc(100% 300px);
height: 100%;
transform: translateZ(0); /* <--- This is the culprit */
}
div {
background:url(https://picsum.photos/2000/1000?image=1069) center no-repeat;
clip-path: url(#overlay-clip);
-webkit-clip-path: url("#overlay-clip");
width: 100%;
height: 100%;
} <section>
<figure>
<div>
</div>
</figure>
</section>
<svg width="0" height="0">
<clipPath id="overlay-clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00089047195, 0.00178571428)" d="M561.490925 560c-.293288 0-.62491-.008736-.994142-.026062-.070349-.004215-.136781-.007594-.204373-.011238-.31743-.015917-.66661-.039172-1.042005-.06843-.092201-.008655-.177676-.015555-.264455-.022755l.010365.002366c-.412269-.034002-.854177-.074794-1.325199-.122269l-.013422-.003197a92.890823 92.890823 0 0 1-.184381-.018836l.013039.003222c-24.24249-2.492667-123.018479-22.100899-228.132231-45.129076-1.606552-.352154-3.215965-.705189-4.826617-1.058975-1.074535-.235909-2.148737-.472093-3.223417-.708597-1.190222-.261989-2.381524-.5244-3.573315-.787182a8131.510993 8131.510993 0 0 1-2.522405-.556599 8315.976609 8315.976609 0 0 1-4.538406-1.003371c-.841104-.186323-1.682394-.372712-2.523796-.559259-1.08599-.240602-2.171938-.48157-3.257998-.722789-4.519895-1.004178-9.042503-2.012634-13.561723-3.024338-1.046644-.233836-2.092877-.468249-3.138862-.702823-1.134674-.254994-2.269361-.509736-3.403672-.76465-1.369678-.307211-2.738607-.6152-4.106839-.923412-.784223-.177316-1.569371-.354319-2.35426-.531389-1.246045-.280395-2.490558-.561449-3.73431-.84265-.875436-.198702-1.751085-.396852-2.626317-.595068-93.026025-21.065294-181.33866-42.864655-217.756007-55.923117l.021827.00352c-.449605-.161063-.891324-.320796-1.325067-.479183l-.01994-.003314c-.402534-.147141-.79818-.293119-1.186863-.43792l.01693.002661c-.54822-.204019-1.08263-.4057-1.603029-.605005l-.017858-.003692c-.323323-.123975-.641222-.247031-.953649-.369158l.01652.003624c-.59217-.23119-1.164738-.459049-1.717374-.683512l-.010117-.001924a118.511716 118.511716 0 0 1-.450933-.184452c-.65704-.272016-1.292973-.540641-1.898-.80398-.036916-.014943-.071875-.030204-.10673-.045448-.652104-.285952-1.269112-.565191-1.848793-.838023-.016317-.007604-.031552-.014792-.04676-.021975-2.399772-1.131962-4.1557-2.153703-5.210037-3.053481C11.688401 416.036836 0 301.872305 0 279.984868c0-21.85112 11.6884-136.021704 37.866304-158.363112C64.280154 99.05639 530.261358 0 561.490925 0h.01815c31.229567 0 497.210775 99.05639 523.624625 121.621756C1111.3116 143.963164 1123 258.133748 1123 279.984868c0 21.887437-11.6884 136.051968-37.8663 158.393376-1.05434.899778-2.81027 1.921519-5.21127 3.054002-.01398.006662-.02921.01385-.04447.021042-.58074.273244-1.19775.552483-1.8513.837974-.03341.015705-.06837.030966-.10343.046246-.60688.263002-1.24281.531627-1.90904.805417-.13961.059452-.28993.120937-.44175.182678l-.01011.001924c-.55264.224463-1.12521.452322-1.71738.683512l.01652-.003624c-.31242.122127-.63032.245183-.95365.369158l-.01786.003692c-.52039.199305-1.0548.400986-1.60302.605005l.01693-.002661c-.38869.144801-.78433.290779-1.18687.43792l-.01994.003314c-.43374.158387-.87546.31812-1.32506.479183l.02182-.00352c-36.41734 13.058462-124.729979 34.857823-217.755104 55.923718-.876132.197615-1.751781.395765-2.627807.593843-1.243162.281825-2.487675.562879-3.732837.843764-.785772.17658-1.57092.353583-2.356297.530513-1.367078.308598-2.736007.616587-4.105485.924326-1.134511.254386-2.269198.509128-3.404177.76368-1.04568.235016-2.091913.469429-3.138327.703668-4.51945 1.011301-9.042058 2.019757-13.562719 3.023894-1.085294.24126-2.171242.482228-3.257003.722933-.841631.186444-1.682921.372833-2.524064.559055-1.513404.335139-3.026372.669641-4.538666 1.003567a9669.365611 9669.365611 0 0 1-2.521931.556481 8938.173235 8938.173235 0 0 1-3.573983.787234c-1.074187.236475-2.148389.472659-3.22204.70851-1.611536.353844-3.220949.706879-4.828879 1.059114-105.112374 23.028096-203.888363 42.636328-228.130853 45.128995l.013039-.003222a92.890823 92.890823 0 0 1-.184381.018836l-.013422.003197c-.471022.047475-.91293.088267-1.325199.122269l.010365-.002366a57.018152 57.018152 0 0 1-.256421.020701c-.383429.031312-.732609.054567-1.055139.071733-.062492.002395-.128924.005774-.194191.008887-.374314.018428-.705936.027164-.999224.027164h-.01815Z"/>
</clipPath>
</svg>