Trianglify not working in iOS 10 on ipad

pimhooghiemstra commented 4 years ago

I'm using trianglify on my website to generate a nice header. Although it works great on modern devices/browsers, we also test the website on an older iPad running iOS 10.3.3. On this device, in both Safari and Chrome, trianglify is not loading anything. Our heading remains blank.

Moreover, when connecting the iPad to my Mac to try to debug, there are no errors in the console. However, all other JS code that runs after trianglify stopped working. Only when I remove the code to run trianglify, the other code works again.

In addition, the demo page of the project at https://trianglify.io stays blank as well on this iPad.

I am using trianglify 4.0.0 which I load in the <head> of my page and this is my code to create the pattern. It works well on all other devices and browsers I tested.

I am wondering if this could be fixed, or how I could catch the error such that the rest of the code still runs. I will try to add a try/catch block around this code and will update this issue when I tried it.

Any comment and/or help is much appreciated.

(function () {
    const pattern = trianglify({
        width: window.innerWidth,
        height: 182,
        variance: 0.75,
        cellSize: 22,
        xColors: ['#332f87', '#4CAF50'],
        yColors: ['#332f87', '#4CAF50'],
    });

    const patternSvg = pattern.toSVG({ includeNamespace: true });
    document.getElementById('header').style.background = `url('data:image/svg+xml, ${patternSvg.outerHTML} ')`;    
})();

pimhooghiemstra commented 4 years ago

I added a try...catch block around the code that creates the pattern and simply use a fixed color as background.

document.getElementById('header').style.background = '#da025a'

qrohlf commented 4 years ago

I don’t have access to an iOS 10 environment, so I can’t really help you much without additional info.

If you can include the error message and stack trace in this issue, I might be able to look into it.

On Wed, Jun 17, 2020 at 7:03 AM Pim Hooghiemstra notifications@github.com wrote:

I added a try...catch block around the code that creates the pattern and simply use a fixed color as background.

document.getElementById('header').style.background = '#da025a'

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/qrohlf/trianglify/issues/130#issuecomment-645359811, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACUYNJA2EMPOOEUQ63IBHDRXC5JJANCNFSM4OAR7MQA .

pimhooghiemstra commented 4 years ago

I am afraid I can not add any error message or stack trace: it simply shows a white screen when attaching the device to my mac.

Maybe add to documentation that iOS 10 is not supported?

Op wo 17 jun. 2020 om 15:05 schreef Quinn Rohlf notifications@github.com:

I don’t have access to an iOS 10 environment, so I can’t really help you much without additional info.

If you can include the error message and stack trace in this issue, I might be able to look into it.

On Wed, Jun 17, 2020 at 7:03 AM Pim Hooghiemstra <notifications@github.com

wrote:

I added a try...catch block around the code that creates the pattern and simply use a fixed color as background.

document.getElementById('header').style.background = '#da025a'

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/qrohlf/trianglify/issues/130#issuecomment-645359811 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AACUYNJA2EMPOOEUQ63IBHDRXC5JJANCNFSM4OAR7MQA

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/qrohlf/trianglify/issues/130#issuecomment-645361011, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABXEVT2TALAUKF2BXOC3LZDRXC5R3ANCNFSM4OAR7MQA .

qrohlf / trianglify

Trianglify not working in iOS 10 on ipad #130