Fancybox display issues on iPad - css

I'm using the Fancybox on this page.
I've set it to show the videos in the top carousel in a Fancybox only
if the browser is Safari/iPad. If you click one of the videos in the
top content carousel, you'll see some extra lines outside of the
Fancybox. Plus, you'll see that the title item (set to titlePosition:
"outside") has some funky corners -- they're off by a pixel or two.
On the iPad, if you tap the "Click to See a Gallery of Popular Thank
You Gifts!" toward the middle, bottom of the page, you'll see some
extra lines outside of the Fancybox when it pops up.
This all works fine on Windows Safari 5. Any solutions?

Related

Mouseover effect works fine on desktop but not when swiped over on a mobile

I am building a site on WordPress and I'm using Elementor as the page builder
I have a full width section that has a fluid hover effect background and in this section I have two columns. In my right column, I have added a transparent flipbox.
FRONT OF THE FLIPBOX: I have a little doodle urging users to hover anywhere in the section (this activates the mouseover fluid effect)
BACK OF THE FLIPBOX: I have a gif of a surprised monkey that slides up when hovering over the flipbox.
Everything works fine on a desktop - when I hover anywhere within the section, the fluid effect works and if I hover over the message on the right, my monkey appears.
On a mobile phone, the fluid effect works when I swipe within the section, but the flipbox doesn't flip over to show the gif of the monkey when swiped over or tapped.
I have tried setting the z-index on column and flipbox, but that hasn't worked.
Your help would be sooo appreciated.

How to deal with mobile browser nav bar?

I'm developing a website. I have a button that I want to be fixed in the right-bottom corner. The problem is, in mobile browsers, it gets covered by the navigation bar:
The bar sometimes hides while user is scrolling. Can reappear again.
This happens both on Android/Chrome and iOs/Safari.
Is there an elegant way to script the element so it would always be displayed in full and stuck just in the corner of the shown part of the website?
I think the mobile browsers does hides the bar when it is scrolling down and shows it when you scroll up.
Maybe move the location of the button when scrolling up with JS or something.

Elements apear only after inspect element/resize broswer window

As title says go here: https://www.woopservices.com/portfolio/about/ and press the little "menu" button on the bottom left.
It will display an empty box which is supposed to have a shortcode for visual portfolio just like i have on my homepage but what is strange is that it will not load.
It only loads if I resize the window or inspect the element.
This is driving me crazy i have search on other posts but nothing seemed to help.

Vimeo in lightbox - fullscreen not working in chrome

I am experiencing an issue in chrome. I am using a wordpress plugin to popup a vimeo embed. Everything looks perfect, except for when you click the full screen icon in the vimeo controls.
The page jumps to full screen but you can only see about a quarter of the video in the top left corner of the browser, on top of the page content that should be hidden by the full screen video.
Please advise!
Resolved. There was an unsupported issue with the plugin I was using. #wpproblems

Scrolling within a Lightbox on iPhone/iPad

I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.

Resources