Safari 不允许隐藏溢出的 svg 剪辑路径溢出容器
Posted
技术标签:
【中文标题】Safari 不允许隐藏溢出的 svg 剪辑路径溢出容器【英文标题】：Safari not letting svg clip-path overflow container with overflow hidden 【发布时间】：2021-11-30 06:14:28 【问题描述】：我正在使用 svg 剪辑路径来创建一个蒙版，该蒙版在移动设备上会以固定的像素宽度溢出其容器。在移动设备上，此容器与视口的垂直边缘齐平，因此所需的效果是将剪裁的图像同时拉到视口的左侧和右侧。
在 Firefox 和 chrome 中，我编写的代码运行良好，但在 Safari 中，似乎与 overflow: hidden 有交互。
下面的代码解释得最好，在这种情况下，我将部分设置为 400px 的宽度以模拟屏幕宽度。如果您在 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 >
<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 >
<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>【讨论】：
以上是关于Safari 不允许隐藏溢出的 svg 剪辑路径溢出容器的主要内容，如果未能解决你的问题，请参考以下文章
CSS - 剪辑路径 svg 在 Firefox 上不起作用