Mobile layout broken in Experience Builder

455
9
09-05-2021 02:30 PM
Teresa_Blader
New Contributor III

When opening an application that used to work just fine on my mobile device, it now displays the error: undefined is not a constructor (evaluating 'new window.ResizeObserver(n.re    ... and the rest is off screen. 

I tried republishing, same error. Chrome and Safari both same error. I noticed my app views have dropped in the last 7 days, so I'm wondering if it's been broken for a while. I am on an iPhone 6.

Preview mode in Experience Builder displays just fine. Displays in desktop just fine. 

 

Help!!!

Directions to Olmsted County Government Buildings (arcgis.com)

Teresa Blader
blader.teresa@co.olmsted.mn.us
Olmsted County Planning Department
GIS Division
0 Kudos
9 Replies
Teresa_Blader
New Contributor III

Screenshot 2021-09-05 163657.png

Teresa Blader
blader.teresa@co.olmsted.mn.us
Olmsted County Planning Department
GIS Division
0 Kudos
WaterHammer
New Contributor II

I tested your link on an iphone 12 and it appears to work fine, no error message.

KeithGerhartz1
Occasional Contributor II

I am having the same issue. Works on PC and on phone but I get that error message in the iPad. Have you been able to deteremine what the issue is?

0 Kudos
Teresa_Blader
New Contributor III

Working with Esri Tech. It is an update issue. Some devices are just not compatible any more with the Jave Script update back in June. Esri Tech put in for an enhancement to display a compatibility message instead of script. :( We have about 14,000 visits to our website that are on older devices; it's only 2% of the population, but still a large amount will not not be able to access information on Experience Builder, and Instant Apps due to this update. 

Teresa Blader
blader.teresa@co.olmsted.mn.us
Olmsted County Planning Department
GIS Division
DaveFullerton
Occasional Contributor III

During the user conference, I happened to ask about which version of javascript was being used.  For anyone who is interested in somewhat simplified specifics:  "Before 1.5, it's compiled to es5, but it's compiled to es6 since 1.5."  The version numbers reference the Developer Edition of ExB.

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.  JavaScript is based on ECMAScript.

The Experience Builder code is written in React and Typescript and converted to JavaScript.  The developers can set which ECMAScript version to convert to.  I am guessing that the ExB developers had some good reasons for moving forward.  I have no doubt that this was not done lightly.  Displaying a proper compatibility message is definitely in order.

KeithGerhartz1
Occasional Contributor II

The device I was testing is an iPad Air. iOS cannot be updated beyond 12.5.4 on this device. My experience worked on it until I upgraded to Experience Builder 1.5 after which the above referenced error occurs. I have tested on a 6th generation iPad running iOS 14.7.1 and everything works fine.

All of this is consistent with what you shared. We definitely need something here to prevent negative user experiences. Can you please let me know what support comes up with? Thanks.

Teresa_Blader
New Contributor III

Esri support solution is simply to create some kind of message that says "Device not compatible". Not a real solution per say, but at least something. 

Apart from the Esri Support Tech's help, I've realized that there are some elements that are still compatible. Since I am attempting to feed location information on county government website, just saying "sorry, not compatible" isn't really an option. My solution, even though it still looks tacky was to recreate a similar application in web app builder and then link within the experience builder. Elements that still work are the "Menu" "Navigation Panel" and "Text" for sure. I haven't tried any others. With that, I can at least provide links and some context. So this is what I came up with: the menu button linked to a compatible version (web app builder is still compatible), and then a text link that says "Error? Open Compatible Version" with a link.

The Menu option gives me the ability to still connect to other content that I was hoping to provide users.  

Does this seem like a reasonable solution? @KeithGerhartz1 

Teresa_Blader_0-1631715783787.png

 

Teresa Blader
blader.teresa@co.olmsted.mn.us
Olmsted County Planning Department
GIS Division
0 Kudos
gisgeeknorth
New Contributor II

Teresa,  I'm no web developer, but I was having this same issue on my iPad Pro 2018 with Safari,  Even with the most recent update to iPad OS (14.8) I still had the same error as you.

However, in poking around, I did notice that if you go to the iPad Settings > Safari > Advanced > Experimental Features... you'll see an  option called "Resize Observer" Which peaked my curiosity as that's the same words as in the EB error message.  Turn that option on and the error disappears in EB apps!  

I realize that's an awfully obscure set of instructions to tell users but... it worked for me.

Curiously, it also fixed a similar issue with the new Dashboards.

Chris

Teresa_Blader
New Contributor III

Great idea! I didn’t know that was possible. Sadly, my iPhone 6 doesn’t have the option to turn on the experimental resize observer. I was pretty hopefully to see though! Glad that can be a option for devices with that option. 

Teresa Blader
blader.teresa@co.olmsted.mn.us
Olmsted County Planning Department
GIS Division
0 Kudos