search

mobify / pikabu

Off-Canvas flyout menu
http://mobify.github.io/pikabu/
MIT License
453 stars 51 forks source link

.m-pikabu-nav-toggle position:fixed inside viewport isn't fixed #30

Closed grischka closed 10 years ago

grischka commented 10 years ago

This works fine: 

<a class="m-pikabu-nav-toggle" style="position:fixed;">Toggle</a>  
<div class="m-pikabu-viewport">
    [Content]
</div>

But this doesn't: 

<div class="m-pikabu-viewport">
    <a class="m-pikabu-nav-toggle" style="position:fixed;">Toggle</a>  
    [Content]
</div>

It's caused by the compination of position:fixed and -webkit-transform (Further explained here: https://code.google.com/p/chromium/issues/detail?id=20574)

Any ideas how to fix this? Any work arounds?

kpeatt commented 10 years ago

@grischka — Unfortunately, this is a browser issue with position: fixed elements inside of transform elements as you said. You could switch out the animations from using transform to left or right instead but you will get degraded animation performance.

Instead, I'd recommend pulling out any elements you need to be fixed outside the pikabu-viewport and have them exist either as siblings or further up the DOM. This should enable you to use both. If you need that element to live inside of pikabu-viewport, we usually clone the element with javascript.