I using an openseadragon and annotorious-openseadragon libraries to work with annotations on my website. Everything is working fine everywhere except Ipad air 4+ safari web-browser. This is what happened when I trying to draw multiply svg objects (screen from browserstack).
You can see all those vertical lines. This is not my job 🙂 Idk why it is so. Its should looks like this
this is a snippet to reproduce this bug
// very big svg objects
var sampleAnnotation = [{"@context":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"фывф","purpose":"commenting"}],"target":{"source":"http://localhost:3000/gist/undefined","selector":{"type":"SvgSelector","value":"<svg><path d="M553.3169555664062 681.3240356445312 L556.6597290039062 685.5106811523438 L563.309814453125 690.4487915039062 L581.1146240234375 700.1627197265625 L600.4758911132812 713.045654296875 L629.5269775390625 730.774169921875 L659.92431640625 749.9573974609375 L693.4526977539062 767.5196533203125 L742.8221435546875 797.7689208984375 L792.121826171875 818.44677734375 L841.3558349609375 850.2068481445312 L893.6697998046875 881.9053344726562 L934.832763671875 904.0648193359375 L980.70166015625 926.2005615234375 L1021.7759399414062 948.31396484375 L1045.4112548828125 960.9156494140625 L1070.6075439453125 970.3447875976562 L1089.4627685546875 979.76708984375 L1098.730712890625 982.8129272460938 L1109.6697998046875 992.22412109375 L1112.7156982421875 995.3192138671875 L1111.36865234375 994.57080078125"></path></svg>"}},"id":"#926aed3d-26be-49b5-ab43-6161031f6bd8","zoomLevel":0.8022570765661251},{"@context":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"фывыв","purpose":"commenting"}],"target":{"source":"http://localhost:3000/gist/undefined","selector":{"type":"FragmentSelector","conformsTo":"http://www.w3.org/TR/media-frags/","value":"xywh=pixel:377.0811767578125,942.0926513671875,324.386962890625,135.178955078125"}},"id":"#674a21c7-d97f-43e5-acb1-f44c4f98de4d","zoomLevel":0.5571229698375869},{"@context":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"sss","purpose":"commenting"}],"target":{"source":"http://localhost:3000/gist/undefined","selector":{"type":"SvgSelector","value":"<svg><line x1="686.9415283203125" y1="372.413818359375" x2="897.4363403320312" y2="569.9550170898438"></line></svg>"},"renderedVia":{"name":"line"}},"id":"#5bbe1f3b-12c0-4084-a4a5-58662cb1fc7c","zoomLevel":0.568465909090909},{"@context":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"ddd","purpose":"commenting"}],"target":{"source":"http://localhost:3000/gist/undefined","selector":{"type":"SvgSelector","value":"<svg><path d="M199.18508911132812 471.26763916015625 L199.36708068847656 469.2500305175781 L201.6888885498047 469.3369445800781 L206.23126220703125 469.3780212402344 L210.79876708984375 473.96612548828125 L219.8451690673828 483.0223083496094 L228.8885955810547 494.3298645019531 L240.1836700439453 505.63372802734375 L253.72982788085938 528.2055053710938 L260.5103454589844 537.247314453125 L276.30419921875 555.3018188476562 L289.8521728515625 571.11474609375 L305.6393127441406 591.414794921875 L321.4201354980469 613.9591674804688 L337.1995849609375 629.7429809570312 L348.47088623046875 643.2711791992188 L361.9927062988281 659.0494384765625 L377.768798828125 674.8324584960938 L384.5289611816406 686.1000366210938 L395.7919921875 697.3660278320312 L409.3052978515625 708.6303100585938 L416.0618591308594 715.3896484375 L422.81768798828125 724.3997192382812 L427.32122802734375 724.4028930664062 L434.07568359375 726.66015625 L438.57794189453125 731.1650390625 L440.82879638671875 733.4185180664062 L443.0794677734375 733.4207153320312 L447.5807189941406 737.9244384765625 L449.8309326171875 737.9260864257812 L454.33087158203125 742.4307250976562 L458.8310546875 742.4322509765625 L461.0797119140625 742.4351806640625 L463.328125 742.437744140625 L467.8273010253906 742.4390258789062 L470.07537841796875 742.4415283203125 L472.32427978515625 742.4425659179688 L479.0726318359375 742.4437255859375 L485.8206481933594 742.4447021484375 L492.5684509277344 740.1961059570312 L503.8150939941406 726.699462890625 L512.8118286132812 706.4547729492188 L526.305419921875 681.7137451171875 L539.8001098632812 661.4711303710938 L544.2968139648438 650.2267456054688 L557.7907104492188 632.234619140625 L566.7855834960938 614.2431030273438 L573.531005859375 591.7536010742188 L582.5230712890625 573.7666625976562 L589.2681274414062 555.77685546875 L593.7639770507812 540.0366821289062 L600.5089111328125 526.5458374023438 L602.7555541992188 504.05908203125 L602.7532958984375 488.3199157714844 L602.7511596679688 470.33197021484375 L604.9961547851562 456.84564208984375 L604.993896484375 450.1033630371094 L604.9925537109375 436.61285400390625 L604.9925537109375 432.1150817871094 L604.9925537109375 425.36846923828125 L604.9925537109375 420.8706970214844 L604.9925537109375 409.6263427734375 L604.9925537109375 402.87969970703125 L604.9925537109375 391.63531494140625 L604.9925537109375 384.8887023925781 L604.9925537109375 375.8931884765625 L604.9925537109375 364.6488342285156 L604.9925537109375 362.3999328613281 L604.9925537109375 355.6533203125 L604.9925537109375 351.15557861328125 L604.9925537109375 346.6578063964844 L604.9925537109375 344.408935546875 L604.9925537109375 337.6623229980469 L602.7437133789062 333.16455078125 L602.7437133789062 330.9156799316406 L600.4948120117188 328.66680908203125 L598.2459106445312 326.4179382324219 L595.9970703125 324.1690673828125 L591.4993286132812 319.6712951660156 L589.2504272460938 319.6712951660156 L578.0060424804688 315.1735534667969 L571.2594604492188 315.1735534667969 L557.7661743164062 312.9246826171875 L537.5263061523438 306.17803955078125 L515.0375366210938 303.9291687011719 L492.5487976074219 299.4314270019531 L472.30889892578125 297.18255615234375 L445.3223876953125 292.684814453125 L425.08251953125 292.684814453125 L400.3448791503906 292.684814453125 L377.85614013671875 292.684814453125 L364.3628845214844 292.684814453125 L353.1184997558594 292.684814453125 L339.625244140625 292.684814453125 L328.380859375 297.18255615234375 L314.8876037597656 299.4314270019531 L308.1409912109375 299.4314270019531 L305.8921203613281 301.6802978515625 L308.1409912109375 301.6802978515625 L312.63873291015625 301.6802978515625 L314.8876037597656 303.9291687011719 L317.136474609375 303.9291687011719 L319.3853454589844 306.17803955078125 L321.6342468261719 306.17803955078125 L328.380859375 312.9246826171875 L332.87860107421875 312.9246826171875 L339.625244140625 317.42242431640625 L344.12298583984375 317.42242431640625 L348.6207580566406 319.6712951660156 L357.6162414550781 321.9201965332031 L359.8651123046875 321.9201965332031 L364.3628845214844 321.9201965332031 L368.8606262207031 324.1690673828125 L375.60723876953125 326.4179382324219 L377.85614013671875 328.66680908203125 L384.6027526855469 328.66680908203125 L386.85162353515625 328.66680908203125 L389.1004943847656 328.66680908203125 L398.09600830078125 328.66680908203125 L411.5892639160156 324.1690673828125 L420.58477783203125 319.6712951660156 L429.58026123046875 312.9246826171875 L436.326904296875 310.6758117675781 L440.82464599609375 306.17803955078125 L443.0735168457031 303.9291687011719 L443.0735168457031 301.6802978515625 L445.3223876953125 297.18255615234375 L447.5712585449219 294.9336853027344 L452.06903076171875 294.9336853027344 L458.8156433105469 294.9336853027344 L470.0600280761719 294.9336853027344 L497.0465393066406 294.9336853027344 L526.2819213867188 294.9336853027344 L562.263916015625 294.9336853027344 L600.4948120117188 294.9336853027344 L638.7257080078125 294.9336853027344 L690.4498291015625 290.4359130859375 L742.1739501953125 290.4359130859375 L793.8981323242188 290.4359130859375 L832.1290283203125 290.4359130859375 L865.8621215820312 290.4359130859375 L886.1019897460938 290.4359130859375 L895.0975341796875 290.4359130859375 L904.093017578125 290.4359130859375 L906.3419189453125 290.4359130859375 L917.5863037109375 290.4359130859375 L949.070556640625 297.18255615234375 L978.305908203125 297.18255615234375 L1007.5413208007812 301.6802978515625 L1045.772216796875 301.6802978515625 L1075.007568359375 310.6758117675781 L1104.242919921875 310.6758117675781 L1133.4783935546875 310.6758117675781 L1151.4693603515625 315.1735534667969 L1164.962646484375 315.1735534667969 L1171.709228515625 315.1735534667969 L1169.4603271484375 315.1735534667969 L1162.7137451171875 312.9246826171875 L1160.46484375 312.9246826171875 L1153.71826171875 310.6758117675781 L1149.220458984375 308.42694091796875 L1140.2249755859375 308.42694091796875 L1133.4783935546875 308.42694091796875 L1128.9805908203125 308.42694091796875 L1122.2340087890625 308.42694091796875 L1117.7362060546875 308.42694091796875 L1117.7362060546875 312.9246826171875 L1117.7362060546875 317.42242431640625 L1126.731689453125 324.1690673828125 L1133.4783935546875 324.1690673828125 L1142.473876953125 326.4179382324219 L1146.9715576171875 328.66680908203125 L1151.4693603515625 330.9156799316406 L1153.71826171875 330.9156799316406 L1158.2159423828125 335.4134521484375 L1160.46484375 337.6623229980469 L1164.962646484375 342.1600646972656 L1169.4603271484375 346.6578063964844 L1171.709228515625 348.90667724609375 L1173.9581298828125 351.15557861328125 L1178.455810546875 355.6533203125 L1180.7047119140625 360.15106201171875 L1185.2025146484375 364.6488342285156 L1187.4512939453125 366.897705078125 L1187.4512939453125 369.1465759277344 L1189.7001953125 371.39544677734375 L1194.197998046875 375.8931884765625 L1196.4468994140625 378.14208984375 L1196.4468994140625 378.14208984375"></path></svg>"}},"id":"#7955762b-3c17-4c75-b8c7-63cb71634459","zoomLevel":0.8185909090909089},{"@context":"http://www.w3.org/ns/anno.jsonld","type":"Annotation","body":[{"type":"TextualBody","value":"ss","purpose":"commenting"}],"target":{"source":"http://localhost:3000/gist/undefined","selector":{"type":"SvgSelector","value":"<svg><path d="M346.3718566894531 1295.683349609375 L355.36737060546875 1293.4344482421875 L371.1094970703125 1293.4344482421875 L393.5982666015625 1293.4344482421875 L418.33587646484375 1293.4344482421875 L438.5757751464844 1293.4344482421875 L461.06451416015625 1293.4344482421875 L474.5577697753906 1295.683349609375 L479.0555419921875 1295.683349609375 L488.051025390625 1297.9322509765625 L492.5487976074219 1302.429931640625 L497.0465393066406 1302.429931640625 L503.79315185546875 1302.429931640625 L512.7886352539062 1304.6788330078125 L515.0375366210938 1304.6788330078125 L519.5352783203125 1304.6788330078125 L521.7841796875 1304.6788330078125 L524.0330200195312 1304.6788330078125 L533.028564453125 1309.1766357421875 L535.2774047851562 1309.1766357421875 L542.0240478515625 1309.1766357421875 L544.27294921875 1309.1766357421875 L551.01953125 1309.1766357421875 L557.7661743164062 1311.4254150390625 L562.263916015625 1313.67431640625 L564.5128173828125 1313.67431640625 L571.2594604492188 1313.67431640625 L575.7572021484375 1313.67431640625 L580.2549438476562 1313.67431640625 L584.752685546875 1313.67431640625 L587.0015869140625 1313.67431640625 L587.0015869140625 1315.9232177734375 L589.2504272460938 1315.9232177734375 L591.4993286132812 1315.9232177734375 L595.9970703125 1315.9232177734375 L600.4948120117188 1315.9232177734375 L607.241455078125 1315.9232177734375 L613.988037109375 1315.9232177734375 L622.9835815429688 1315.9232177734375 L631.9790649414062 1315.9232177734375 L645.4723510742188 1318.172119140625 L647.72119140625 1318.172119140625 L658.965576171875 1318.172119140625 L661.2144775390625 1318.172119140625 L667.9610595703125 1318.172119140625 L670.2099609375 1318.172119140625 L672.4588623046875 1318.172119140625 L674.7077026367188 1318.172119140625 L681.454345703125 1318.172119140625 L683.7031860351562 1318.172119140625 L690.4498291015625 1318.172119140625 L694.9475708007812 1318.172119140625 L703.943115234375 1318.172119140625 L710.689697265625 1318.172119140625 L717.4363403320312 1318.172119140625 L724.1829833984375 1318.172119140625 L730.9296264648438 1320.4210205078125 L737.6762084960938 1320.4210205078125 L739.9251098632812 1320.4210205078125 L744.4228515625 1320.4210205078125 L746.6717529296875 1320.4210205078125 L748.9205932617188 1320.4210205078125 L753.4183349609375 1320.4210205078125 L755.667236328125 1320.4210205078125 L757.9161376953125 1320.4210205078125 L766.91162109375 1320.4210205078125 L780.4048461914062 1322.6697998046875 L787.1514892578125 1324.918701171875 L798.3958740234375 1324.918701171875 L805.1425170898438 1324.918701171875 L818.6357421875 1324.918701171875 L827.6312255859375 1324.918701171875 L834.3778686523438 1324.918701171875 L836.6267700195312 1324.918701171875 L836.6267700195312 1324.918701171875"></path></svg>"}},"id":"#1534cb55-8365-485e-8ff8-ab094450740a","zoomLevel":0.8185909090909089}];
window.onload = function () {
var viewer = OpenSeadragon({
id: "openseadragon",
prefixUrl:
"https://cdn.jsdelivr.net/npm/[email protected]/openseadragon/images/",
tileSources: {
type: "image",
url:
"https://images.unsplash.com/photo-1719937051124-91c677bc58fc?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
},
gestureSettingsTouch: {
pinchRotate: true
}
});
var anno = OpenSeadragon.Annotorious(viewer, {
locale: "auto"
});
anno.setAnnotations(sampleAnnotation);
}; .openseadragon-canvas {
outline:none;
background-color:#f4f4f4 !important;
border-radius:3px;
}<div id="openseadragon" style="width: 1400px; height: 1800px;"></div>this is a codepen page to reproduce it on real device link to codepen you can open it as a full page and dragg it to see what I mean.
Any suggestions would be helpful