Clip-path si svg merg static pe Chrome,Edge, Safari, cu ajax nu merge pe Safari

Salut,
Ma chinui de cateva saptamani cu un bug de la Safari iOS. Cred ca asta e bug-ul https://bugs.chromiu...etail?id=686074
Am un iPhone XR dar nu am MAC, am doar laptopuri windows. Am inteles ca doar cu un iPhone conectat la un MAC poti sa faci WebInspect.

Vreau sa arat doar o bucata din imaginea respectiva, bucata respectiva sa fie in forma de puzzle. Si asta fac cu un clip-path care referentieaza un svg in care este definita forma respectiva.

Codul HTML este urmatorul:

<div class="container-reward">
<img id="reward-image-overlay" class="reward-clip-svg" src="http://test4.learnro.com/sites/default/files/images/reward/stefan_cel_mare.jpg">
<img src="http://test4.learnro.com/sites/default/files/images/reward/stefan_cel_mare.jpg" id="reward-image">
</div>
<svg style="width:0px;height:0px;">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">	 <polygon points="0,0 .4,0 .4,.4 0,.4"></polygon>
<circle cx=".2" cy=".42" r=".04"></circle>
<circle cx=".4" cy=".2" r=".04"></circle></clipPath>
	 </defs>
</svg>

CS-ul e urmatorul:

.container-reward {position:relative;margin-top: 2px;}

.reward-clip-svg {
clip-path: url(#myClip);
-webkit-clip-path: url(#myClip);
}
#reward-image-overlay
{
position: absolute;
max-width:80vw;
max-height:80vh;
}

#reward-image
{
opacity: 0.035;
-webkit-opacity: 0.035;
max-width:80vw;
max-height:80vh;
}

1) Codul de mai sus merge pe toate browserele: Edge, Chrome pe Win si pe android si Safari Mobile  cand pagina e statica, adica nu e incarcata prin ajax.
Aici e un exemplu pe codepen:
https://codepen.io/m...dor/pen/yLRRrrV
Si aici e integrat in site:
http://www.test4.learnro.com/node/5863

2) Acelasi cod HTML de mai sus cand este adus prin ajax merge pe Edge, Chrome pe Win10 si pe android dar nu merge pe Safari, arata toata imaginea in loc sa arate doar partea vizibila in forma de puzzle referentiata de clip-path si svg. Problema e ca pe Chrome sau Edge cu DevTools si simulare de iPhone pare ca merge, dar pe un iPhone adevarat nu merge. Eu am testat pe iPhone-ul sotiei, si l-am rugat si pe un coleg sa verifice, intr-adevar arata toata imaginea in loc de bucatica aceea mica in forma de puzzle din imagine.

pasii pentru reproducere sunt:
a) http://www.test4.lea...t-learning-5396
b) sub tabela cu "I must", "I have to"... click pe 1 cu iconita de multiple choice questions
c) raspundeti corect la toate cele trei intrebari si apoi la sfarsit o sa apara bucatica respectiva in forma de puzzle din imaginea mai mare, cum spuneam mai sus pe Edge Chrome, dar pe Safari mobile apare toata imaginea.

La punctul c s-ar putea sa nu fie chiar imaginea cu Stefan cel Mare, poate sa fie o alta imagine pentru ca este aleasa random o imagine, dar oricum ar fi tot timpul este codul cu svg care aplica clip-path-ul deci ar trebui sa fie doar o bucata din imagine nu toata imaginea.


In primul rand nu stiu cum sa debughez. Nu pot sa debughez pe local, si chiar si pe server pe mediul de test, trebuie tot timpul sa golesc cache-ul si apoi sa cer telefonul nevestei...

Daca aveti vre-o idee v-as fi recunoscator, cum sa fac sa debughez si sa rezolv problema asta care e pana la urma, cred eu un bug de safari.

Edited by leny29, 18 May 2023 - 22:26.