ragnarlotus/vue-flux

Full-screen mode in modal on IOS (safari and chrome)

Closed this issue · 3 comments

jeremy-rafflin commented

Hi,
I use vue-flux on my website. I have a carousel in a modal (https://buefy.org/documentation/modal/) and when I use the full-screen mode on IOS (safari and chrome), the image is not full-screen. I means the size of the image is the size of my modal.
Is it possible the referee for the width calculation is not the rigth referee ?

Thanks

ps: sorry if my English is not very well, I am French ;)

ragnarlotus commented

Hello, I understand you great :)

Can you please tell me what version are you using?
When you say full screen, you mean the double click functionality on the slider?

Regards

jeremy-rafflin commented

I use the version 5.1.9 and yes it's the double click functionality on the slider.

I have a 'hack' to my probleme :
set width:100%;height: 100%; to the parent div of vue-flux
add this css :
.vue-flux.fullscreen { width: 100%; .mask { width: 100% !important; height: 100% !important; >div:first-child { background-size: 100% 100% !important; background-position: 0px 0px !important; } } }

But it's not a good solution :)

ragnarlotus commented

That is covered is version (5.1.9)[https://github.com/deulos/vue-flux/blob/releases/5.1.9/src/components/VueFlux.vue#L624], but doing some testing I found the issue you are having and you are right. If you set the vue-flux component with styles width and height, then that size will be the final one.

As it can be fixed overwriting the CSS rule, I will not make a new release but I will have it fixed in version 6.X

Thanks a lot for reporting and finding a workaround.