Strange behaviour: Iframed IE11 Page Issues

ah apologies so I create the breadcrum circles and they work perfectly in
chrome edge firefox & safari

as soon as that build is run in the agent desktop (the funky IE 11) the breadcrums become square

I think the PIE.htc does look after some css also but not sure at this stage.

I gave the crumbs and arrows + navbars ( did not realise about the navbars before) addition class names.
And removed all Hype click actions.

The init() function now has the code to assign the click actions to elements with the navb class.

All crumbs , arrows and navbar have this class.

The arrows and navbar all have a class named either forward or backward
And the crumbs have a class name of crumbs
These are used the steps() function to determine what element called the function..

14_iCare_single CSS MHv3 .hype.zip (1.3 MB)

ah ok thats smart and again sorry me being vague its the nav bar that is the main issue as they just dont work or atleast not properly ill run that through our test account and let you know... fingers crossed

and thank you so much for your continued support its really appreciated.

no change =( navbars dont work and only the outline of the breadcrums are clickable the fill isnt recognised

(breadcrums arent as important as the navbar issue)

Ok I will have a think.
Maybe some one can test it on IE11 if they have it.

Still waiting to hear if it’s anything to do with the PIE.htc
Which you never know since you are already seeing issues with oval elements from Hype.

1 Like

Ill try PIE.htc first thing tomorrow

Did you remove it before?

No not knowingly but ive seen you can add it in the css
behavior: url(/PIE.htc);

My understanding is that this helps support CSS3 features in IE 6-9 only. IE11 should be able to handle border-radius correctly.

Thanks.
I did notice the PIE.htc does have minified js code that deals with mouse events ( I think)

But not sure its relevant any way.

I think we will only know if IE is the problem here if some else can test it. The problem may very well be something to do with how said dev team are setting things up.

I have IE11 readily available, but reading through the thread I'm a bit unclear on what the actual issue is.

@WDAdesigns.co.uk would you be able to provide an exact list of steps to reproduce, along with the expected outcome (on a modern browser) and what IE11's incorrect behavior is? If you can include any relevant screenshots that may be useful. Thanks!

1 Like

sorry guys dont mean to be useless, sooo

build (not working in a cut back version of IE11)
TEST One File (working version using JS / CSS)

the issue im facing is the navigation bars on each side of the central image dont work or if they do work its a strange behaviour such as only the chevron is clickable not the bar and which ever chevron is on top will work the other wont (reverse the order and the opposite will work and original one wont). The breadcrums work as they should simply jumping to time in timeline and running a JS but the issue is the breadcrum it self, only the outline is clickable making it difficult to select and not so much an issue but a possible clue is they are no longer round when we run it through the agent desktop they are square.

this build works in every browser I have on my system it has flagged an Active X prompt in testing on another machine.

things ive tried...
Removing all Javascript
Removing all CSS
Removing Timeline Functions
Replaced any PNG images

My most basic version was to have all of the steps across different scenes and the button press simply jumping scenes but had the same issue

one other thing to mention that make give a clue to the issue is the red number at the top that is showing too high is set that way due to the alignment when in the agents tool is offset so that is actually inline on their system but way off on all my browsers

Just two remarks from the sideline: The stacking order in Hype is set by z-index and not necessarily the same as the order of the markup itself. Maybe a source of error in IE11. On another thing, I see you have some layers on top of the chevrons. Even if they are set to hidden, they may block clicks or interrupt event bubbling. Try removing them or putting the chevrons on top to see if that is the reason. Concerning the outline… try adding a color fill with 1% opacity (opacity in the color selector).

Sorry I should of specified Ive tried moving nav to the top even tried removing the shape button and adding an hype button and only the button text was clickable (which ever ones on top)

breadcrums ive given a fill the same colour as the background assuming no fill would cause the issue but it didnt help

Sidenote to @jonathan either these are individual bugs resulting from some individual setup or it is just another reason to drop old IE going forward (at least with Hype 5).

Thanks for the additional details. Unfortunately, I cannot seem to access this page:

It seems that you have malformed URLs like
~removed~

And in IE 11, it just hangs trying to get a response.

Is this a new change? Can you fix it so I can see the error page in IE 11? Thanks!

The build (not working in a cut back version of IE11) is not HTTPS it only http

if your browser is trying to force HTTPS i.e https://www.adamhow.co.uk/build/ is will fail to be accessed. Instead makes sure its

http://www.adamhow.co.uk/build/

Yes, it must be http, but the issue is older browser seem to choke on these head html lines as well:

~removed~

Probably in large part because ~removed~ isn't a proper domain name.

I'd say that users hitting issues on IE 11 shows the browser is still in use and unfortunately a data point to maintain support :sweat_smile:! But really, I don't think I can answer until I can get at the root cause of the bug.

1 Like

ah no sorry guys thats my bad when you requested me put it back up I forgot to add the css back into the build basically is hosted on a private network server (them links)

quick update
ive found that the outline of anything works perfectly as an on click event so I have crudely fixed the issue by drawing a box over any buttons putting a thick border on it and reducing the width so that the outline covers the button I then drop the opacity and it works

not ideal but I have a working version so I guess the question is now why would the outline of a shape be clickable but not the fill (text works as a clickable object as well)

ill update the build link with the css file included shortly

again thank you all for your continued support

Ah,
I initially looked to see if you had vector elements as the arrows as I thought you could be getting a similar issue to this.

https://forums.tumult.com/t/bug-in-vector-shape-clicks-selection/13408

But you use images and normal elements for the navbars. So I dismissed that idea
But it sounds like IE does have what sounds loke the same issue with theses?!