devices.css
devices.css copied to clipboard
marvelapp
Can't interact with content
No matter what content i place inside the screen div I can't interact with it (i.e. scroll, click etc.) I gather this is by design, and if so, is there a workaround?
@mrlund Can you check if this still happens with the new version of device.min.css?
Still an issue. It's very easy to reproduce. Just drop any content in the screen div, and see if you can click on it. I used an iframe, but it fails to work even it it's just a link, i.e.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="/css/devices.min.css" type="text/css">
</head>
<body>
<div class="marvel-device iphone6 silver">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<a href="/blah">Testing</a>
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
</body>
</html>
The "testing" link cannot be clicked.
Came across the same problem
Temp fix I used:
.marvel-device {
pointer-events: none;
}
.your-link-iframe-etc {
pointer-events: auto;
}
.marvel-device:after is what is capturing pointer events.
This should do the trick:
.marvel-device:after {
pointer-events: none;
}
