search

googlearchive / core-scroll-header-panel

Fancy scrolling effects where the header animates between tall and condensed states
19 stars 16 forks source link

Fullscreen not working properly inside core-scroll-header-panel #46

Closed alefwmm closed 9 years ago

alefwmm commented 9 years ago

Hello guys, I have one problem related to pull request #38. I know translateZ(0) fixes page repaints but it breaks fixed position elements. I am trying to get one component at fullscreen, but it does not work. An example:

Template (in jade):

core-scroll-header-panel
    core-toolbar
    div
        my-component(on-click="{{enterFullscreen}}" id="mc")

Javascript:

Polymer('...', {
    enterFullscreen: function () {
        this.$.mc.webkitRequestFullscreen();
    }
});

When at fullscreen mode, core-toolbar is still visible, the page is scrollable and my-component is not in fixed position.

Here are some screenshots:

Normal page: screenshot from 2015-05-12 17 57 41

Fullscreen page (I am trying to get the chart fullscreen): screenshot from 2015-05-12 17 57 55

Fullscreen scrollable page screenshot from 2015-05-12 17 58 03

Removing translate(0) from #mainContainer in core-scroll-header-panel fix this problem, but it is not the right way. Any help?