I'm building a reactjs widget which has scrollable lists (vertically) inside it, which takes the entire viewport on mobile (I prevent the default for "touchmove" on the window so as not to scroll the background).
But when I open the widget on iPhone (tested on both Safari and Chrome), I can scroll down the list, but can't scroll back up! if I want to scroll back up, I need to scroll a bit down before I scroll up (one action, without lifting the finger).
I also have reversed lists (same design, only with flex-direction: column-reverse), and I have the exact same behavior regardless of the flex direction.
I also noticed that the "touchmove" event on the list is not firing when I can scroll, but it is firing when I can't.
It works great on desktop, tablets (iPad as well) and android devices - just not on iPhone.
I need the scroll to work both ways on iPhone as well
It was my mistake - it was a combination of using body-scroll-lock and preventDefault of "touchmove" on the body.
All fixed now
Related
I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".
I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile
Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode
I have trouble making an embedded google map work properly on mobile devices. It is within a div box and set to 100% height/width and works as inteded when not on mobile phones. On phones it adds a big square-shaped button with an arrow in it in the bottom right corner which consequently shrinks the map size in the div to about half. When I click the mysterious button, nothing happens. So, an annoying button with no function. When I touch the map, the button disappears and the div is filled though. Anyway to get rid of that button?
I have a web page with a menu fixed to the bottom of the page. When you zoom in on the page with the iPhone (and presumably other mobile devices), the menu also zooms but remains fixed to the bottom of the screen, which causes it to eat up all the screen real estate. Is there any way to keep this menu a fixed size regardless of zoom?
I think this could solve your problem: http://davidwalsh.name/zoom-mobile-browsers