Very generic issue I am sure, and apologies for the title, but not sure how else to word this.
Background: VisualStudio 2022 preview, .Net 4.8, ASP.Net (not Core)
index.aspx
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
iframe {
position: absolute;
border: solid ;
border-width: 1px;
box-sizing: border-box;
min-width: 855px;
min-height: 465px;
}
</style>
<div class="divCanvas">
<canvas id="compass" height="230" width="230"></canvas>
</div>
<iframe id="if1"
src="https://awebsite">
</iframe>
</asp:Content>
CSS
#compass {
background: url("../images/compass2.png");
background-size: cover;
vertical-align: middle;
}
.divCanvas
{
z-index:99;
position:absolute;
margin-left: 525px;
margin-top: 70px;
}
So what we have here is a simple <iframe>
showing me a website and using CSS and <div>
I am overlaying a <canvas>
object over the iframe, and yes in a specific spot so that it overlays an area of the iframe where I want it displayed, hence the margin-left
and margin-right
properties.
Problem is, this only works on desktop browsers (all of them), but does nothing other than show the iframe
in a mobile browser (all of them again). What's happened with my <div>
?
Incidentally, the VS project generated a ViewSwitcher.ascx
file, which I think is the issue here, but it doesn't stand out where in the code there is anything happening for mobile browsers.
Any ideas please? Should I be using the ViewSwitcher
ascx file in some way to display my div
over the iframe
? I have no idea what viewswitcher
is really doing here in the first place or if it's even needed.
Thanks