Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't interact with content #19

Open
mrlund opened this issue Aug 10, 2015 · 5 comments
Open

Can't interact with content #19

mrlund opened this issue Aug 10, 2015 · 5 comments

Comments

@mrlund
Copy link

mrlund commented Aug 10, 2015

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
Copy link
Contributor

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

@mrlund
Copy link
Author

mrlund commented Sep 8, 2015

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
Copy link

sowenjub commented Oct 2, 2015

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

@mwvd
Copy link

mwvd commented Apr 7, 2016

Came across the same problem

Temp fix I used:

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

.your-link-iframe-etc {
    pointer-events: auto;
}

@bivainis
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sowenjub @mwvd @bivainis @olegtsaplin @mrlund