search

marvelapp / devices.css

Pure CSS phones and tablets
MIT License
3.95k stars 611 forks source link

Can't interact with content #19

Open mrlund opened 9 years ago

mrlund commented 9 years ago

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?

olegtsaplin commented 9 years ago

@mrlund Can you check if this still happens with the new version of device.min.css?

mrlund commented 9 years ago

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.

sowenjub commented 9 years ago

The screen z-index seems too low. Setting it to 3 instead of 2 solves the issue.

mwvd commented 8 years ago

Came across the same problem

Temp fix I used:

.marvel-device {
    pointer-events: none;
}

.your-link-iframe-etc {
    pointer-events: auto;
}
bivainis commented 7 years ago

.marvel-device:after is what is capturing pointer events. This should do the trick:

.marvel-device:after {
  pointer-events: none;
}