Strange behaviour: Iframed IE11 Page Issues

Hi im really sorry about the vagueness in this question but here it goes
I work for a large media company and we use hype to build interactive guides for our agents on the phones to walk through technical support processes these are simple builds that have a next and previous button that continue a timeline and continue timeline in reverse each second has a pause timeline action and a new image is hidden / shown theres also javascript that replaces text in a text box, there is a new javascript function for each step / second and these javascript functions are either called in via timeline action or button press which jumps to time in timeline.

all the styling is controlled by basic css and theres nothing that should cause an issue (no browser conflicts in app)

once exported this build works perfectly in EDGE, Chrome, Safari and Firefox as soon as we iFrame it into our tool which the agents use we are loosing onclick events of one of the buttons that controls the timeline, the breadcrum system works which basically jumps to time in timeline and queues up the relevant javascript but the buttons that move forward and backwards on the timeline loose the plot basically the text on the button ontop is clickable and works but the button itself doesnt and the other button doesnt work however if I put the non working button ontop of the other button that one will work and the other one will stop working.

the dev team of the tool we use are pretty useless and havent got a clue what browser version they are using (we suspect it is IE11) Ive tried adding active X meta compatibility in the head and tried stripping back the build as much as possible and removing preload to no avail, does any one have any ideas how I can get this build to work

any suggestions would be amazing

thanks in advanced

1 Like

This could be a number of things
Like when in the iframe the elements are slightly changing position and covering other event areas. But to really get a handle on what is going on are you able to post an example project.
Plus an example of how you are iframing in a parent doc

It's tough to say what might be causing this, but one thing that may help is using something like to encourage users to update their browsers. This can be configured to only show for really out of date browsers and may help with identifying the problem.

I would also check the box that says "Notify all browser versions with severe security issues". This would produce the following <head> HTML code snippet you could use:

var $buoop = {required:{e:-4,f:-3,o:-3,s:-1,c:-3},insecure:true,unsupported:true,api:2022.10 }; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//"; 
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}

This is an open source tool: GitHub - browser-update/browser-update: Remind users to update their browser in an unobtrusive way

It might also be caused by your custom code. Are you scoping things correctly and also are you assigning click handler by yourself or are you relying on Hype todo it? IE11 is pretty much history and not even supported by Microsoft …

Hi all thank you already for your input ive hosted a template of the build externally so you guys can take a look I know IE11 is dead on its feet and its not something we choose unfortunately its being used as an internal browser in a corporate build that combines multiple systems and is only used to access secured intranet pages (this build was being used perfectly fine on IE11 using a meta tag at the parent level of the iFrame but since migration its just not playing ball

the build does flag as malicious I promise its not im not sure why it does that either as the only script in this build is inner html javascript

I can upload the hype file if it would help but will need to rejig the css as its pointing to a secure server currently

If you can…

template download

I put this in a basic iframe and not getting the issue. ( Safari)

Is there a specific iframe setup and any thing else of note on the parent page


One thing to note is the way you are set up going from a bread crumb then a arrow button you will need to click twice on the arrow for it to work.

A little jigging around how the setup would fix this. Basically you are sending the timeline to a pause which I does, so you then have to click again.

While I had a quick moment , and I know this probably will not solve your issue ( which as mentioned I am not seeing )
I revised your project to simplify the code to a single code function ( probably can be more optimised ) and to fix the double click issue.

removed all the run javascript actions from the timeline.
Removed all the step functions and consolidated into single function named steps().

Given the bread crumbs ids to use in the code.
Given the arrow buttons ids to use in the code

Changed intro() function name to init()

Added the line in the init()

hypeDocument.customData.currentCrumb = 0

The Arrow buttons still control the timeline but also now call steps()
The bread crumbs buttons still control the timeline but now all call the steps()
On Layout load now also calls steps().

(Did not touch the mini custom layout )

The steps() will work out what called it.
Either HypeSceneLoad, bread crumb button or arrow button.

It will then set the hypeDocument.customData.currentCrumb value and use that to switch through the text values.

It will also use hypeDocument.customData.currentCrumb to set the step count text.

There are also greater than and less than limiters to stop the function progressing if the hypeDocument.customData.currentCrumb is less than 1 or greater than 14 ( or what ever great number you need)

adjusted the timeline to use second intervals rather than fractions of seconds.
And removed the Button/arrows controlling the timeline. That is now done in the code with hypeDocument.goToTimeInTimelineNamed(hypeDocument.customData.currentCrumb, 'crumbs1') as hypeDocument.customData.currentCrumb, now reflects the timeline seconds.
Also slightly changed the limiter code.

14_iCare_single CSS MHv2 (1.3 MB)

thank you for all your help

it never had a double click issue? and the iframe isnt the issue really as I cant replicated the issue in any browser I have the issue is present when we try to use the build through the agents desktop tool that has a really awful version of IE11 running

Ok. I get it.

The version you posted.
Click a bread crumb then click an arrow.
In that version you have to click the arrow twice for it to work

unfortunately yours has the same complications as the original build the breadcrums dont respond on the fill only on the outline and the buttons on either side dont work =(

is there anything I can do within Hype to simplify the exported file to make it as basic as possible as Ive created a basic page with similar functions including javascript and css that works in our agents rubbish desktop tool so its got to be something that Hype is including that I dont necessarily need

As I thought. The main reason for offering it was to simplify the code so you did not have a huge number of functions duplicating the same job.
This also makes it easier to edit in future if you have to.

Your project you posted only includes what you put in it.
Which is a css file, images and the hype code files. I cannot really see any of that doing anything it should not be doing.

Are you adding anything else when you make up the one you are using?

Without using hype you mean?


Does your dev team get any error messages in their console ?

p.s did an update above in my version to fix a bug.

yes sorry should of specified without hype raw code if you like does everything the hype build does just built out of code and it works as it should

dev team are useless we have managed to identify it is a version of IE11 they are running god knows why they would be building a new tool with an out of date browser but ultimately we are getting very little support or help from the dev team

ive updated this link to the version that is working built outside of hype

@Daniel , @jonathan
Does the have an affect on IE11 ?

is how hype applies rounded edges etc in IE11?
The breadcrum css is not being honoured im getting square boxes where they display round in hype
(circle shapes straight out of the GUI)

The was for Explorer compatibility but not sure if it only went up to a particular version.

Sorry can you detail what you are doing to get that ?

Also was going to say:

Have you tried to assign the click event listeners via code in hype.

so the breadcrums are just circle shapes from hype that change colour through timeline actions

and in short no I havent not sure how Id do that

cards on the table I rely heavily on the Hypes controls in regards to building in Hype

What I mean is, when are you getting squares ?

Let me see if I can do and example for you to assign the click events. I am only suggesting this since your ones in native html/JS seem to work for you and am trying to find where the issue may lay with IE11.