I am using svg clip path to create a mask which on mobile overflows its container by a fixed pixel width. On mobile, this container is flush with the vertical edges of the viewport, so the desired effect is the clipped image being pulled both to the left and right of the viewport.
In firefox and chrome, the code I have written works well, however in Safari, there seems to be an interaction with overflow: hidden.
The following code explains it best, in this case I have set the section to a width of 400px to emulate the screen-width. If you open this code snipped in Firefox and Chrome, the code works perfectly, however in Safari the clipped image is bound between the edges of the 'viewport'. Is there any way to force the clipped image outside of its container while hiding the overflowing content?
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>