Demo doesn't load on mobile Safari (iOS 10.3.3)...

nicroto commented 6 years ago

Awesome project, Sergej. Thanks for building this and MIT-licensing it.

I just checked the demo on an older iPad (4th generation), which runs the previous official iOS (10.3.3), but the word cloud didn't show up. There are a lot of these devices in use, still.

Do you have any idea are there any versions (and which ones) of iOS (mobile Safari) that are able to run the component?

SeregPie commented 6 years ago

Hi. The demo even runs on Internet Explorer 11. So other browsers should not be a problem. I have no way to check it on old Safari browsers. Is there no way to update the Safari to the latest version? Can you open up the console on your side and look what errors it throws? Maybe it does not support WebWorkers?

nicroto commented 6 years ago

There are no errors in the console. Just the cloud doesn't get rendered.

Here is the page that gets rendered:

open

```html VueWordCloud

``` And a screenshot: ![issue](https://user-images.githubusercontent.com/1172150/42678952-2963e188-8689-11e8-86ea-33dcd842950e.png)

I would like to help out in fixing this, so let me know if you want me to test something specific.

I hope you will reopen this issue, since there are a lot of these devices out there, still. I personally would like to use the VWC, but I need to support that browser.

SeregPie commented 6 years ago

I really don't know why it's not working by you.

Here is a screenshot from a mobile safari. issue

Does this one work on your safari? This one is without WebWorkers and without Vue. https://seregpie.github.io/almete.WordCloud/

nicroto commented 6 years ago

Thanks for reopening the issue and testing.

Nothing here, as well, unfortunately. There are no errors in the console, either. Is there any javascript you want me to probe on the device (some API that you suspect might not be available)?

open

```html almete.WordCloud

```

SeregPie commented 6 years ago

Is it possible, that getImageData is just not supported on older ios versions? https://stackoverflow.com/questions/10517154/canvas-getimagedata-not-working-on-mobile-safari

This is the only way to get text pixels, so I can calculate where to place them.

SeregPie commented 6 years ago

There are also some external font issues. https://github.com/highcharts/highcharts/issues/6902 This could be the problem. You can try to use some default ios fonts. Maybe this will work.

nicroto commented 6 years ago

I can confirm that the following does NOT produce an error:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

This API is available on the mobile Safari 10.

nicroto commented 6 years ago

I've spent an hour debugging and what I see happening, but just lack the better understanding to fully grasp, is:

On Chrome (probably desktop Safari too) - VueWordCloud's render method is being called 4-5 times before the progress starts and then it's called for each word item's rendering.
On mobile Safari 10, it's called only 1 (once).

At asyncComputed/cloudWords/index.js:

Chrome: the get method is called twice (get -> render -> render -> render -> get) and the second time it manages to get the correct element width and height with let elementAspect = getNormalizedAspect([elementWidth, elementHeight]);
mobile Safari 10: get -> render -> done... get isn't called a 2nd time so it never gets the correct size and thus it never manages to get inside the if-statement checking for a real size, and never manages to run the huge Promise going through all words...

nicroto commented 6 years ago

This is not resolved and there are a ton of those devices out there still...

SeregPie commented 6 years ago

Ok. Ok. Maybe someday one will help with this. I cannot fix this until I know where the bug is.

andersponders commented 5 years ago

@nicroto @SeregPie hey guys, I had an issue with the same symptoms (no render, no errors) on an FFox desktop. Once i realized that the component was swallowing errors w/ the errorHandler noop method and turned that off, it was pretty easy for me to figure it out.

Turns out my boss' version of FFox predates the promise.prototype.finally implementation, but the "Promise.then().then().........finally() is not a function" error was getting swallowed. All i had to do was add the shim for promise.prototype.finally and it worked. @nicroto I'm guessing you're having the same issue with mobile safari, promise.finally() wasn't implemented until safari 11.1

as an aside, swallowing errors within your component is probably a bad idea, just my 2¢

SeregPie commented 5 years ago

@andersponders thank you very much. strange, that babel-polyfill does not fix this issue. the new version will come (some day), and i will make many things the other way it is right now.

SeregPie / VueWordCloud

Demo doesn't load on mobile Safari (iOS 10.3.3)... #33