robob
Reputation: 1749
Does iOS 16 break SVG icons in Ionic/Cordova mobile apps?
I have a very old mobile app for iOS made in Ionic 3 with Cordova 5.
Before iOS 16 everything works well, but now I have a very strange behaviour for SVG icons.
Browsing the app's pages, the SVG icons sometimes are not completely rendered.
This image shows it very well:
I have tried to use a very simple SVG instead of my original SVGs and it works fine, so I think it's a bug introduced in iOS 16 for (particular) SVG 1.1 that I use.
Here is the source for a SVG icon that gives me the problem:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 215.4 112.7" style="enable-background:new 0 0 215.4 112.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2F2F30;}
.st1{display:none;fill:none;stroke:#1C1CF4;stroke-miterlimit:10;}
</style>
<path class="st0" d="M52.3,98.6c-2.3,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3c2.3,0,4.3-1.9,4.3-4.3S54.7,98.6,52.3,98.6z"/>
<circle class="st0" cx="11.7" cy="102.8" r="4.3"/>
<circle class="st0" cx="21.9" cy="102.8" r="4.3"/>
<circle class="st0" cx="32" cy="102.8" r="4.3"/>
<circle class="st0" cx="42.2" cy="102.8" r="4.3"/>
<path class="st0" d="M62.5,98.6c-2.3,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3c2.3,0,4.3-1.9,4.3-4.3S64.8,98.6,62.5,98.6z"/>
<path class="st0" d="M54.2,90.9c0.3,0.1,0.6,0.1,0.9,0.1c1.9,0,3.7-1.3,4.2-3.3c0.3-1.1,0.1-2.2-0.6-3.2c-0.6-1-1.6-1.6-2.7-1.9
c-2.3-0.5-4.6,0.9-5.1,3.2c-0.3,1.1-0.1,2.2,0.6,3.2C52.1,90,53,90.7,54.2,90.9z"/>
<path class="st0" d="M14.6,82c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7c1-0.6,1.6-1.6,1.9-2.7c0.3-1.1,0.1-2.2-0.6-3.2
c-0.6-1-1.6-1.6-2.7-1.9c-2.3-0.5-4.6,0.9-5.1,3.2c-0.3,1.1-0.1,2.2,0.6,3.2S13.4,81.8,14.6,82z"/>
<path class="st0" d="M29.5,81c0.3-1.1,0.1-2.2-0.6-3.2c-0.6-1-1.6-1.6-2.7-1.9c-2.3-0.5-4.6,0.9-5.1,3.2c-0.5,2.3,0.9,4.6,3.2,5.1
c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7C28.6,83.1,29.3,82.1,29.5,81z"/>
<path class="st0" d="M36.2,78.2c-2.3-0.5-4.6,0.9-5.1,3.2c-0.2,1.1-0.1,2.2,0.6,3.2c0.6,1,1.6,1.6,2.7,1.9c0.3,0.1,0.6,0.1,0.9,0.1
c1.9,0,3.7-1.3,4.2-3.3C40,81,38.5,78.7,36.2,78.2L36.2,78.2z"/>
<path class="st0" d="M46.1,80.4c-1.1-0.3-2.2-0.1-3.2,0.6c-1,0.6-1.6,1.6-1.9,2.7c-0.2,1.1-0.1,2.2,0.6,3.2c0.6,1,1.6,1.6,2.7,1.9
c0.3,0.1,0.6,0.1,0.9,0.1c1.9,0,3.7-1.3,4.2-3.3C49.9,83.2,48.4,80.9,46.1,80.4z"/>
<path class="st0" d="M65.9,84.9c-2.3-0.5-4.6,0.9-5.1,3.2c-0.5,2.3,0.9,4.6,3.2,5.1c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7
c1-0.6,1.6-1.6,1.9-2.7c0.3-1.1,0.1-2.2-0.6-3.2C68,85.8,67,85.1,65.9,84.9z"/>
<circle class="st0" cx="107.5" cy="48.4" r="4.3"/>
<circle class="st0" cx="107.5" cy="7.8" r="4.3"/>
<circle class="st0" cx="107.5" cy="18" r="4.3"/>
<circle class="st0" cx="107.5" cy="28.1" r="4.3"/>
<circle class="st0" cx="107.5" cy="38.3" r="4.3"/>
<circle class="st0" cx="107.5" cy="58.6" r="4.3"/>
<path class="st0" d="M60.5,75.3c0.7,0.5,1.5,0.7,2.3,0.7c1.4,0,2.8-0.7,3.6-2c0.6-1,0.8-2.1,0.6-3.2s-0.9-2.1-1.9-2.7
c-1-0.6-2.1-0.8-3.2-0.6c-1.1,0.2-2.1,0.9-2.7,1.9s-0.8,2.1-0.6,3.2S59.5,74.7,60.5,75.3z"/>
<path class="st0" d="M26.3,53.4c0.7,0.5,1.5,0.7,2.3,0.7c1.4,0,2.8-0.7,3.6-2c0.6-1,0.8-2.1,0.6-3.2c-0.2-1.1-0.9-2.1-1.9-2.7
c-1-0.6-2.1-0.8-3.2-0.6c-1.1,0.2-2.1,0.9-2.7,1.9c-0.6,1-0.8,2.1-0.6,3.2C24.7,51.9,25.3,52.8,26.3,53.4z"/>
<path class="st0" d="M34.8,58.9c0.7,0.5,1.5,0.7,2.3,0.7c1.4,0,2.8-0.7,3.6-2c0.6-1,0.8-2.1,0.6-3.2c-0.2-1.1-0.9-2.1-1.9-2.7
c-2-1.3-4.6-0.7-5.9,1.3c-0.6,1-0.8,2.1-0.6,3.2C33.2,57.3,33.9,58.3,34.8,58.9z"/>
<path class="st0" d="M43.4,64.3c0.7,0.4,1.5,0.7,2.3,0.7c0.3,0,0.6,0,0.9-0.1c1.1-0.2,2.1-0.9,2.7-1.9s0.8-2.1,0.6-3.2
s-0.9-2.1-1.9-2.7c-2-1.3-4.6-0.7-5.9,1.3c-0.6,1-0.8,2.1-0.6,3.2S42.4,63.7,43.4,64.3z"/>
<path class="st0" d="M51.9,69.8c0.7,0.4,1.5,0.7,2.3,0.7c0.3,0,0.6,0,0.9-0.1c1.1-0.2,2.1-0.9,2.7-1.9c1.3-2,0.7-4.6-1.3-5.9
c-2-1.3-4.6-0.7-5.9,1.3C49.4,65.9,50,68.5,51.9,69.8z"/>
<path class="st0" d="M73.6,73.6c-2-1.3-4.6-0.7-5.9,1.3c-0.6,1-0.8,2.1-0.6,3.2s0.9,2.1,1.9,2.7c0.7,0.4,1.5,0.7,2.3,0.7
c0.3,0,0.6,0,0.9-0.1c1.1-0.2,2.1-0.9,2.7-1.9C76.2,77.5,75.6,74.8,73.6,73.6z"/>
<path class="st0" d="M79.4,56.3L79.4,56.3c-0.7-0.9-1.7-1.5-2.8-1.6c-1.1-0.1-2.2,0.2-3.1,0.8c-1.9,1.4-2.2,4.1-0.8,6
c0.8,1.1,2.1,1.7,3.4,1.7c0.9,0,1.8-0.3,2.6-0.9C80.5,60.8,80.8,58.1,79.4,56.3z"/>
<path class="st0" d="M51.3,30.9c0.9,0,1.8-0.3,2.6-0.9c0.9-0.7,1.5-1.7,1.6-2.8c0.1-1.1-0.2-2.2-0.8-3.1c-1.4-1.9-4.1-2.2-6-0.8
C47.8,24,47.2,25,47,26.1c-0.1,1.1,0.2,2.2,0.8,3.1C48.7,30.4,50,30.9,51.3,30.9z"/>
<path class="st0" d="M54.1,37.3c0.7,0.9,1.7,1.5,2.8,1.6c0.2,0,0.4,0,0.6,0c0.9,0,1.8-0.3,2.6-0.9c0.9-0.7,1.5-1.7,1.6-2.8
c0.1-1.1-0.2-2.2-0.8-3.1l0,0c-0.7-0.9-1.7-1.5-2.8-1.6c-1.1-0.1-2.2,0.2-3.1,0.8C53,32.8,52.6,35.5,54.1,37.3z"/>
<path class="st0" d="M59.4,42.2c-0.1,1.1,0.2,2.2,0.8,3.1c0.7,0.9,1.7,1.5,2.8,1.6c0.2,0,0.4,0,0.6,0c0.9,0,1.8-0.3,2.6-0.9
c0.9-0.7,1.5-1.7,1.6-2.8c0.1-1.1-0.2-2.2-0.8-3.1c-0.7-0.9-1.7-1.5-2.8-1.6c-1.1-0.1-2.2,0.2-3.1,0.8
C60.1,40.1,59.6,41.1,59.4,42.2z"/>
<path class="st0" d="M65.6,50.3c-0.1,1.1,0.2,2.2,0.8,3.1c0.7,0.9,1.7,1.5,2.8,1.6c0.2,0,0.4,0,0.6,0c0.9,0,1.8-0.3,2.6-0.9
c0.9-0.7,1.5-1.7,1.6-2.8c0.1-1.1-0.2-2.2-0.8-3.1c-1.4-1.9-4.1-2.2-6-0.8C66.3,48.1,65.7,49.1,65.6,50.3z"/>
<path class="st0" d="M79.6,63.5c-1.9,1.4-2.2,4.1-0.8,6c0.7,0.9,1.7,1.5,2.8,1.6c0.2,0,0.4,0,0.6,0c0.9,0,1.8-0.3,2.6-0.9
c0.9-0.7,1.5-1.7,1.6-2.8c0.1-1.1-0.2-2.2-0.8-3.1C84.1,62.4,81.5,62.1,79.6,63.5z"/>
<path class="st0" d="M93,54.5c2.1-1,3.1-3.5,2.2-5.6v0c-1-2.1-3.5-3.1-5.6-2.2c-2.1,1-3.1,3.5-2.2,5.6c0.7,1.6,2.3,2.5,3.9,2.5
C91.9,54.9,92.4,54.8,93,54.5z"/>
<path class="st0" d="M74.8,17.8c0.6,0,1.2-0.1,1.7-0.4c1-0.5,1.8-1.3,2.2-2.4c0.4-1.1,0.4-2.2-0.1-3.3c-1-2.1-3.5-3.1-5.6-2.2
c-1,0.5-1.8,1.3-2.2,2.4c-0.4,1.1-0.4,2.2,0.1,3.3C71.6,16.8,73.2,17.8,74.8,17.8z"/>
<path class="st0" d="M77.2,18.9c-2.1,1-3.1,3.5-2.2,5.6c0.7,1.6,2.3,2.5,3.9,2.5c0.6,0,1.2-0.1,1.7-0.4c2.1-1,3.1-3.5,2.2-5.6
C81.9,18.9,79.3,17.9,77.2,18.9z"/>
<path class="st0" d="M81.3,28.2c-1,0.5-1.8,1.3-2.2,2.4c-0.4,1.1-0.4,2.2,0.1,3.3c0.7,1.6,2.3,2.5,3.9,2.5c0.6,0,1.2-0.1,1.7-0.4
c2.1-1,3.1-3.5,2.2-5.6C86,28.2,83.5,27.2,81.3,28.2z"/>
<path class="st0" d="M85.4,37.5c-2.1,1-3.1,3.5-2.2,5.6c0.7,1.6,2.3,2.5,3.9,2.5c0.6,0,1.2-0.1,1.7-0.4c2.1-1,3.1-3.5,2.2-5.6
C90.1,37.5,87.6,36.5,85.4,37.5z"/>
<path class="st0" d="M99.3,58.2c-0.5-1-1.3-1.8-2.4-2.2c-1.1-0.4-2.2-0.4-3.3,0.1c-1,0.5-1.8,1.3-2.2,2.4c-0.4,1.1-0.4,2.2,0.1,3.3
c0.5,1,1.3,1.8,2.4,2.2c0.5,0.2,1,0.3,1.5,0.3c0.6,0,1.2-0.1,1.7-0.4c1-0.5,1.8-1.3,2.2-2.4C99.8,60.4,99.8,59.2,99.3,58.2
C99.3,58.2,99.3,58.2,99.3,58.2z"/>
<circle class="st0" cx="162.8" cy="102.8" r="4.3"/>
<circle class="st0" cx="203.4" cy="102.8" r="4.3"/>
<circle class="st0" cx="193.3" cy="102.8" r="4.3"/>
<path class="st0" d="M183.1,98.6c-2.3,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3c2.3,0,4.3-1.9,4.3-4.3S185.5,98.6,183.1,98.6z"/>
<circle class="st0" cx="173" cy="102.8" r="4.3"/>
<circle class="st0" cx="152.7" cy="102.8" r="4.3"/>
<path class="st0" d="M160.1,90.2c0.3,0,0.6,0,0.9-0.1c1.1-0.2,2.1-0.9,2.7-1.9c0.6-1,0.8-2.1,0.6-3.2v0c-0.5-2.3-2.8-3.7-5.1-3.2
c-1.1,0.2-2.1,0.9-2.7,1.9c-0.6,1-0.8,2.1-0.6,3.2C156.4,88.9,158.1,90.2,160.1,90.2z"/>
<path class="st0" d="M199.7,81.3c0.3,0,0.6,0,0.9-0.1c2.3-0.5,3.7-2.8,3.2-5.1c-0.5-2.3-2.8-3.7-5.1-3.2c-2.3,0.5-3.7,2.8-3.2,5.1
C196,80,197.7,81.3,199.7,81.3z"/>
<path class="st0" d="M188.8,75.1c-1.1,0.2-2.1,0.9-2.7,1.9c-0.6,1-0.8,2.1-0.6,3.2c0.4,2,2.2,3.3,4.2,3.3c0.3,0,0.6,0,0.9-0.1
c2.3-0.5,3.7-2.8,3.2-5.1c-0.2-1.1-0.9-2.1-1.9-2.7C191.1,75.1,189.9,74.9,188.8,75.1z"/>
<path class="st0" d="M178.9,77.4c-2.3,0.5-3.7,2.8-3.2,5.1c0.4,2,2.2,3.3,4.2,3.3c0.3,0,0.6,0,0.9-0.1c1.1-0.2,2.1-0.9,2.7-1.9
c0.6-1,0.8-2.1,0.6-3.2C183.5,78.3,181.2,76.8,178.9,77.4z"/>
<path class="st0" d="M172.2,80.1c-1-0.6-2.1-0.8-3.2-0.6c-1.1,0.2-2.1,0.9-2.7,1.9s-0.8,2.1-0.6,3.2c0.4,2,2.2,3.3,4.2,3.3
c0.3,0,0.6,0,0.9-0.1c2.3-0.5,3.7-2.8,3.2-5.1C173.9,81.7,173.2,80.8,172.2,80.1z"/>
<path class="st0" d="M151.1,92.4c2.3-0.5,3.7-2.8,3.2-5.1s-2.8-3.7-5.1-3.2c-2.3,0.5-3.7,2.8-3.2,5.1c0.2,1.1,0.9,2.1,1.9,2.7
c0.7,0.4,1.5,0.7,2.3,0.7C150.5,92.5,150.8,92.4,151.1,92.4z"/>
<path class="st0" d="M156,68.6c-0.6-1-1.6-1.6-2.7-1.9c-1.1-0.2-2.3,0-3.2,0.6c-1,0.6-1.6,1.6-1.9,2.7c-0.2,1.1,0,2.2,0.6,3.2
c0.6,1,1.6,1.6,2.7,1.9c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7C156.6,73.2,157.2,70.6,156,68.6z"/>
<path class="st0" d="M186.6,53.3c0.8,0,1.6-0.2,2.3-0.7c2-1.3,2.6-3.9,1.3-5.9c-1.3-2-3.9-2.6-5.9-1.3c-2,1.3-2.6,3.9-1.3,5.9
C183.8,52.6,185.2,53.3,186.6,53.3z"/>
<path class="st0" d="M177.1,58.6c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7c2-1.3,2.6-3.9,1.3-5.9c-1.3-2-3.9-2.6-5.9-1.3
c-1,0.6-1.6,1.6-1.9,2.7c-0.2,1.1,0,2.2,0.6,3.2C175.1,57.7,176,58.4,177.1,58.6z"/>
<path class="st0" d="M165.3,59c-0.2,1.1,0,2.2,0.6,3.2c0.6,1,1.6,1.6,2.7,1.9c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7
c2-1.3,2.6-3.9,1.3-5.9c-0.6-1-1.6-1.6-2.7-1.9c-1.1-0.2-2.2,0-3.2,0.6C166.2,57,165.6,57.9,165.3,59z"/>
<path class="st0" d="M164.5,63.1L164.5,63.1c-1.3-2-3.9-2.6-5.9-1.3c-2,1.3-2.6,3.9-1.3,5.9c0.6,1,1.6,1.6,2.7,1.9
c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7C165.2,67.7,165.8,65.1,164.5,63.1z"/>
<path class="st0" d="M148,77.2c0.2-1.1,0-2.2-0.6-3.2c-1.3-2-3.9-2.6-5.9-1.3c-1,0.6-1.6,1.6-1.9,2.7c-0.2,1.1,0,2.2,0.6,3.2
c0.6,1,1.6,1.6,2.7,1.9c0.3,0.1,0.6,0.1,0.9,0.1c0.8,0,1.6-0.2,2.3-0.7C147.1,79.3,147.7,78.4,148,77.2z"/>
<path class="st0" d="M142.5,60.6c1.4-1.9,1.1-4.5-0.8-6c-0.9-0.7-2-1-3.1-0.8c-1.1,0.1-2.1,0.7-2.8,1.6c-0.7,0.9-1,2-0.8,3.1
c0.1,1.1,0.7,2.1,1.6,2.8c0.8,0.6,1.7,0.9,2.6,0.9C140.4,62.3,141.7,61.7,142.5,60.6z"/>
<path class="st0" d="M161.3,29.2c0.8,0.6,1.7,0.9,2.6,0.9c0.2,0,0.4,0,0.6,0c1.1-0.1,2.1-0.7,2.8-1.6c1.4-1.9,1.1-4.5-0.8-6v0
c-0.9-0.7-2-1-3.1-0.8c-1.1,0.1-2.1,0.7-2.8,1.6c-0.7,0.9-1,2-0.8,3.1S160.4,28.5,161.3,29.2z"/>
<path class="st0" d="M155.1,37.3c0.8,0.6,1.7,0.9,2.6,0.9c0.2,0,0.4,0,0.6,0c1.1-0.1,2.1-0.7,2.8-1.6c0.7-0.9,1-2,0.8-3.1
c-0.1-1.1-0.7-2.1-1.6-2.8c-1.9-1.4-4.5-1.1-6,0.8C152.9,33.2,153.3,35.9,155.1,37.3z"/>
<path class="st0" d="M148.9,45.3c0.8,0.6,1.7,0.9,2.6,0.9c0.2,0,0.4,0,0.6,0c1.1-0.1,2.1-0.7,2.8-1.6c0.7-0.9,1-2,0.8-3.1
c-0.1-1.1-0.7-2.1-1.6-2.8l0,0c-1.9-1.4-4.5-1.1-6,0.8C146.7,41.2,147.1,43.9,148.9,45.3z"/>
<path class="st0" d="M142,47.4c-0.7,0.9-1,2-0.8,3.1c0.1,1.1,0.7,2.1,1.6,2.8c0.8,0.6,1.7,0.9,2.6,0.9c1.3,0,2.5-0.6,3.4-1.7
c1.4-1.9,1.1-4.5-0.8-6c-0.9-0.7-2-1-3.1-0.8C143.7,45.9,142.7,46.5,142,47.4z"/>
<path class="st0" d="M135.5,62.7c-1.9-1.4-4.5-1.1-6,0.8c-0.7,0.9-1,2-0.8,3.1s0.7,2.1,1.6,2.8c0.8,0.6,1.7,0.9,2.6,0.9
c0.2,0,0.4,0,0.6,0c1.1-0.1,2.1-0.7,2.8-1.6C137.8,66.8,137.4,64.1,135.5,62.7z"/>
<path class="st0" d="M125.6,45.9L125.6,45.9c-2.2-1-4.7,0-5.6,2.2c-1,2.1,0,4.7,2.2,5.6c0.6,0.2,1.1,0.4,1.7,0.4
c0.5,0,1-0.1,1.5-0.3c1.1-0.4,1.9-1.2,2.4-2.2s0.5-2.2,0.1-3.3C127.4,47.2,126.6,46.4,125.6,45.9z"/>
<path class="st0" d="M138.6,16.6c0.6,0.2,1.1,0.4,1.7,0.4c0.5,0,1-0.1,1.5-0.3c1.1-0.4,1.9-1.2,2.4-2.2c0.5-1,0.5-2.2,0.1-3.3
c-0.4-1.1-1.2-1.9-2.2-2.4c0,0,0,0,0,0c-1-0.5-2.2-0.5-3.3-0.1c-1.1,0.4-1.9,1.2-2.4,2.2C135.5,13.1,136.5,15.6,138.6,16.6z"/>
<path class="st0" d="M134.5,25.9c0.6,0.2,1.1,0.4,1.7,0.4c0.5,0,1-0.1,1.5-0.3c1.1-0.4,1.9-1.2,2.4-2.2c0.5-1,0.5-2.2,0.1-3.3
s-1.2-1.9-2.2-2.4c-2.1-1-4.7,0-5.6,2.2C131.4,22.4,132.4,24.9,134.5,25.9z"/>
<path class="st0" d="M130.4,35.1c0.6,0.2,1.1,0.4,1.7,0.4c0.5,0,1-0.1,1.5-0.3c1.1-0.4,1.9-1.2,2.4-2.2c0.5-1,0.5-2.2,0.1-3.3
s-1.2-1.9-2.2-2.4c0,0,0,0,0,0c-2.1-1-4.7,0-5.6,2.2C127.3,31.7,128.2,34.2,130.4,35.1z"/>
<path class="st0" d="M126.3,44.4c0.6,0.2,1.1,0.4,1.7,0.4c0.5,0,1-0.1,1.5-0.3c1.1-0.4,1.9-1.2,2.4-2.2c0.5-1,0.5-2.2,0.1-3.3
s-1.2-1.9-2.2-2.4c-2.1-0.9-4.7,0-5.6,2.2C123.1,40.9,124.1,43.5,126.3,44.4z"/>
<path class="st0" d="M121.5,55.2c-2.1-0.9-4.7,0-5.6,2.2c-0.5,1-0.5,2.2-0.1,3.3c0.4,1.1,1.2,1.9,2.2,2.4c0.6,0.2,1.1,0.4,1.7,0.4
c0.5,0,1-0.1,1.5-0.3c1.1-0.4,1.9-1.2,2.4-2.2c0.5-1,0.5-2.2,0.1-3.3C123.3,56.5,122.5,55.7,121.5,55.2z"/>
<path class="st1" d="M42.8,186.6c0,0,0.3-59.3,58.3-60.7c58-1.3,61.2,61,61.2,61"/>
</svg>
the following is the package.json of my app:
{
"name": "ddddd",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "~4.12.0",
"@ionic-native/device": "^4.17.0",
"@ionic-native/http": "^4.15.0",
"@ionic-native/in-app-browser": "^4.16.0",
"@ionic-native/network": "^4.17.0",
"@ionic-native/screen-orientation": "^4.15.0",
"@ionic-native/splash-screen": "~4.12.0",
"@ionic-native/status-bar": "~4.12.0",
"@ionic/storage": "~2.1.3",
"cc.fovea.cordova.openwith": "1.3.0",
"cordova": "^9.0.0",
"cordova-android": "^8.1.0",
"cordova-browser": "^6.0.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-advanced-http": "^2.2.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-res": "^0.8.1",
"cordova-sqlite-storage": "^5.0.0",
"es6-promise-plugin": "^4.2.2",
"firebase-tools": "^6.1.1",
"http-server": "^0.12.3",
"ionic": "^5.4.16",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"node": "^10.18.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.3",
"node-sass": "^4.14.1",
"typescript": "~2.7.2"
},
"config": {
"ionic_uglifyjs": "./config/uglifyjs.config.js"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-advanced-http": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-network-information": {},
"cordova-plugin-app-version": {},
"cordova-sqlite-storage": {}
},
"platforms": [
"browser",
"ios",
"android"
]
}
}
This is the ionic info:
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.3
Cordova:
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, (and 11 other plugins)
Utility:
cordova-res (update available: 0.15.4) : 0.8.1
native-run : not installed
System:
ios-deploy : 1.11.4
ios-sim : 8.0.2
NodeJS : v12.22.12 (/Users/ffff/.nvm/versions/node/v12.22.12/bin/node)
npm : 6.14.16
OS : macOS Monterey
Xcode : Xcode 14.0.1 Build version 14A400
----- IONIC CODE -----
<ion-grid style="visibility: hidden;" id="tabella1" class="paddingGrid" *ngIf="!this.menuBig">
<ion-row>
<ion-col *ngFor="let m of restApi.vociMenu" (click)="openMenu(m)" class="" col-6>
<ion-card class="cardMenu" navParams="">
<p style="text-align:center;">
<img class="center" style="width:25%; height: 40px;;background: transparent " src="{{getPathImgForSmartphone(m)}}" onerror="this.src='./assets/icon/documenti.svg'"/>
</p>
<p style="padding-top: 8%;">{{m.name.toUpperCase() | decodeSpecialChar}}</p>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
getPathImgForSmartphone(m) -> return stringh path like "'./assets/icon/myicon.svg"
----- UPDATE 1 -----
When executed as web application or runned in the XCode simulator the problem does not appear. It is only shown in the iOS device.
Same web app executed inside Safari in iOS 16 device shows well the SVG images. So I think the problem is related to the particular format of SVG inside Ionic/Cordova app.
I've used a very simple SVG image that didn't have problem in iOS 16 native app. So something in the SVG format breaks Ionic/Cordova view. The image follows:
<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<rect x="0" y="0" width="200" height="200" style="fill:#fff;"/>
<path d="M14,100L186,100" style="fill:none;stroke:#000;stroke-width:7.5px;"/>
<path d="M100,14L100,186" style="fill:none;stroke:#000;stroke-width:7.5px;"/>
<circle cx="100" cy="100" r="70" style="fill:#fff;stroke:#000;stroke-width:7.5px;"/>
<circle cx="100" cy="100" r="5" style="fill:none;stroke:#000;stroke-width:7.5px;"/>
</svg>- when executed in XCode (on the device) I see this error (but I think isn't related): BUG IN CLIENT OF UIKIT: Setting UIDevice.orientation is not supported. Please use UIWindowScene.requestGeometryUpdate
Any idea? Thx for any suggestion.
----- UPDATE 2 -----
it seemed to me that the cubic Bézier curve caused the bug, but it's not true. The bug reflects on rendering the SVG but it's not determined by the nature of the SVG.
Instead I think it's a problem of the <ion-card> or <ion-grid> refresh. I tried to change some background to understand better and sometime the refresh problem is evident.
Look at this animated gif. I think it's a bug of Ionic/Cordova with something introduced in iOS 16. Back to the origin :(
----- TRIVIAL SOLUTION -----
I tried to use the ionic icons with the ion-icon directive and the problem is there again. So, I finally converted all the SVGs in PNG images and adapted the UI.
SVGs have huge problem after iOS 16, especially it seems to me with Ionic. My SVGs have problems because they were exported in SVGs from Adobe and I think that Apple from iOS 16 is more strict on SVG format/language. This is my hypothesis.
Upvotes: 3
Views: 1525
Answers (2)
Emanuele Strazzullo
Reputation: 76
I had the same problem, I solved it by adding css property "will-change: transform;" on the affected elements. I don't know why, but I think the resolution is due to enabling hardware acceleration (or GPU acceleration) caused by "will-change: transform;"
Upvotes: 2
Giuseppe Briotti
Reputation: 61
As I can see, based on Assemblea icon, the part rendered in the svg file are "circle" tags, the part not rendered are "path" tags.
Probably is something related to "c" command?
Upvotes: 1
Related Questions
- how can I insert own svg icons into ionic 6?
- SVGs with linear gradient not handled by Cordova - iOS
- How do I make my custom SVG icons display correctly? (Inkscape, Ionic 4)
- Ionic 4 custom icons not display correctly on Android or IOS simulator and devices
- Ionic - svg does not appear
- iOS does not render SVG images in Ionic 3 project
- ionic app does not render svg files in android but does for ios
- PhoneGap SVG's as data-uri's on iOS
- SVG in iOS browser
- SVG graphics appear as generic "missing" icons in iOS (only)