translate3D preventing ng-gallery to go fullscreen

[PabloMDiez]

Hey there! Thanks for the hard work 👍
I'm using v-Accordion and inside it, I've put a ng-gallery component. When you click on a image, it is supposed to overlay the full screen. The thing is that it only overlays v-pane-content.
I've asked this on ng-gallery issues and StackOverflow.
Given a comment there and another similar issue posted on ng-gallery wiki, I realized it has something to do with v-Accordion's translate3d CSS property.
Do you know any workaround so I can keep ng-gallery inside an accordion, but allowing it to cover the whole body?
Thanks!

[LukaszWatroba]

Hey! Sorry for late reply.

I never use ng-gallery inside v-accordion, but if this is really an issue with translate3d CSS property, the only workaround that comes to my mind is to simply override v-accordion default styling, like so:

.vAccordion--default v-pane-content > div {
  transform: none;
}

.vAccordion--default v-pane.is-expanded > v-pane-content > div {
  transform: none;
}

[PabloMDiez]

Thanks a lot for your response!
I tried it, putting that code in v-acordion.scss. Also tried adding !important to those lines, and even modifying it's other source files where translate3d was to none.
Still the same :(

[LukaszWatroba]

Try to use the v1.5.1 release, remember to override v-pane-content translate3d property and let me know if this helps.
On 1.4.x I was using will-change property witch similarly to translate3d also creates a new compositing layer.

[LukaszWatroba]

For now, I'll close the issue, but feel free to re-open if you're still having problems.

[PabloMDiez]

Fixed with 1.5.1!
Thanks!