Cant use iframe in edge browser

Support
#1

Hey there, I got a page that works great on all browser, exept microsoft edge. Did I do something wrong? can you help me please? You cant scroll or click anything exept the header in edge
thanks for your help!
This only happens in the newest version of edge, thats version 17 right now:
Edge’s console is putting out this: the media query ms viewport has been deprecated
could it have something to do with my problem?

This is another website that embedded the same iframe of the form I’am using and it works there https://custompopsicles.com/contact-us/

It has nothing to do with the form in the iframe but seems to be an issue on the theme side

#2

Hi @zerotoone.de,

Thanks for reaching out.

I checked and it’s scrolling fine on my end without any error. But haven’t tried it on EdgeHTML 17 yet. But based on the iframe’s CSS, it’s just standard iframe with fixed positioning without any connection to the theme. Hence, I assume this is Edge bug which they need to address. Maybe the scroll event handling is affecting the iframe with fixed positioning.

Thanks!

#3

I know works perfectly everywhere, but its version 17 for sure that makes problems. tested differnt computers and also on this platform https://live.browserstack.com/

#4

Hi There,

It’s an issue between the form and Edge, Regretfully, we cannot provide support for third party plugins or scripts due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Anyways, I did take time to investigate this issue and it seems to have something to do with this. Try adding a height to your <body>, use a @media query that is specific to Edge, so it does not affect the other browsers.

CSS for Windows 10 and Microsoft’s Edge

Thank you for your understanding,

1 Like
#5

but the form itself works perfectly, just test the url inserted by the iframe. Thus the issue has to be on the theme side, right?

#6

Hi There,

Did adding a height to body did not work?

At first, I did take a look at this as a theme issue, but I did not see anything unusual. Regretfully, there is no simple way to account for all of the potential variables at play when using another developer’s plugin.

Please contact the plugin author about this issue, they might see something that we did not.

Thank you for understanding,

#7

I added a hight of 500px to the section, row, column and raw content element. it works now, but is this the right size? Do you have a recommendation for me?

Thanks for your help!

#8

Hi @zerotoone.de,

I guess it’s okay, but again, this is not related to the theme as given that works on all other versions except for that one. And your iframe has fixed positioning which makes it independent to the theme layout.

I’ll continue checking.

Thanks!

#9

however I got the problem of a second scrollbar now, how can I deactivate it? Its again only visible in edge and only displayed, when the height of the raw content element is set.

I marked the one I like to get rid of here http://prntscr.com/khod4l
thats the link to the page https://zerotoone.de/submit/

#10

Hey @zerotoone.de,

At first, I didn’t see the issue because it’s fine in a 1080p screen.

I have to resize the browser to see the issue. It’s because of the 800px height. Try changing it to 80vh.

Hope that helps.

1 Like
#11

it has to be at least 90vh that works so far, but what does the vh change? its basically another unit for the height, and if raised to 100vh the second scrollbar still appears

#12

Hey There,

vh stands for the vertical height. It is the height of your browser screen.
For more detailed explanation about vh and vw, please check this out:
https://www.w3schools.com/cssref/css_units.asp

Hope this helps.

#13

thank you, however there is another problem: My navbar is overlapping the scrollbar, how can I fix that?
Thanks for your help!

#14

Set your bar to absolute position.

The reason why I previously said to set your content area’s height to 80vh is to compensate for your relative positioned bar. Based on the style of your iframe it’s supposed to be fullscreen.

Thanks.

#15

This still did not work

#16

I see. Regretfully, we can do nothing on our end anymore. Your custom iframe code’s style was really designed to be added to an empty page. We have tried to work around it but to no avail. Please contact the code provider or consult with a third party developer for further assistance.

Thank you for understanding.

#17

Okay I got a workaround, since this is a problem with the header and not the iframe, I used the side margin option in pro, however I’d like the margin to be applied only to the right side of the header.
$el{margin-right:50px;}
did not work on the element. thanks for your help!

#18

Hi @zerotoone.de

I believe adding this CSS code to (Theme Options > CSS) should resolve this issue:

.page-id-63 header.x-masthead {
    width: calc(100% - 20px);
}

Where 63 is your page ID, check this guide to know how to get your post/page ID:

Thanks.

#19

Thank you, this did not change the header on the desired page

#20

Hey There,

What is the url of the desire page? Maybe you haven’t changed the ID.
To get the page ID, please check this out: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Please let us know how it goes.