x_ite does not work on iPad Safari (IOS 14.4)

[jamesleesaunders]

Describe the bug
X_ITE canvas is blank on Apple iPad Safari.
Works OK on iPhone Safari.

To Reproduce
Goto any webpage with X_ITE scene embedded.
For example
https://create3000.github.io/x_ite/playground/
or
https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/BarChartMultiSeries.html

Screenshots
You do just about see the X_ITE logo load off screen at he start but it is off the side (see screenshot).

Desktop (please complete the following information):
Apple iPad 7th Gen
IOS 14.4 <--- yes this is an old IOS version! I will stay at this version if you need it for testing - otherwise I can do an IOS update.
Safari

Welcome to X_ITE X3D Browser v8.2.0:
   Current Graphics Renderer
      Name: Apple Inc. Apple GPU
      WebGL version: WebGL 1.0
      Shading language: WebGL GLSL ES 1.0 (1.0)
   Rendering Properties
      Antialiased: true
      Depth size: 24 bits
      Color depth: 32 bits
      Max clip planes per shape: 6
      Max lights per shape: 8
      Max multi textures per shape: 2
      Texture units: 32
      Max texture size: 16384 × 16384 pixels
      Texture memory: NaN
      Max vertex uniform vectors: 512
      Max fragment uniform vectors: 224
      Max vertex attribs: 16
      Max varying vectors: 15

[create3000]

Unfortunately I do not have an iPad, the one device I've been missing. Also tested on iPhone and MacBook (latest OS), and it worked. I also tested Safari 14 (ok), but on MacBook.

Your screenshot shows that X_ITE is somehow working, but the size is a little to small. Sure an update could help, but I don't want to recommend you that. I only can guess what's going on, it could be something with the internal CSS of X_ITE.

I have updated the alpha version, with latest fixes, don't know if this will help, but I would ask you if you could test the alpha version. This is simple, because the website runs with alpha. For instance look at https://create3000.github.io/x_ite/playground/ or the start page with examples.

[jamesleesaunders]

I tried the Playground Link and Alpha version on the iPad and still the same issue is seen.

I have put together a little set of test pages using different versions if X_ITE:

https://raw.githack.com/jamesleesaunders/d3-x3d/x-ite-ipad/examples/scratch/x_ite_ipad/x_ite_ipad_latest.html

• Alpha
• Latest
• v8.0.0
• v7.0.0
• v6.1.0

The same issue is actually seen across all versions on iPad (tested they all work fine on other browsers). So I don't think this is anything to do with your latest release and possible something more fundamental to the version of Safari+iPad.

Here is a video showing the results:
https://user-images.githubusercontent.com/13055416/207559263-6a17108f-1b4f-43f3-8e63-abe99585c130.mp4

One other observation is that, although it appears to load the mini X_ITE splash logo, it then does not render the background (normally once loaded this scene would have a black background behind the cube) - it just stays white.

I am more than happy to carry on testing with this version of IOS if you want to chase it down, otherwise I can do an update and see it this fixes the issue (although once I have done an update there is no going back).

[create3000]

Can confirm it now. Have tested the pages in Xcode Simulator with iOS 13 and 14, and the issue is as you described. It turns out that Safari still don't know CSS property inset which can be replaced by top, right, bottom, left.

I have updated the alpha version for testing.

[jamesleesaunders]

Yay! Great sleuthing! Tested alpha version and it now works on iPad + iOS 14.4 Thank you!
I will update the iPad now to iOS 16.2 to give it a whirl also.
It looks like inset was added to Safari in iOS 14.5 https://developer.mozilla.org/en-US/docs/Web/CSS/inset

[jamesleesaunders]

Quick follow-up after updating the iPad to iOS 16... all versions of x_ite work fine, all the above examples work back to x_ite v6.
So, this was only an issue for iOS 14. But thanks for fixing anyway - there are likely a number of people who this may have affected.

[create3000]

Fine, I am always a fan of updating. :)