After updating iphone to iOS 15 I'm facing strange issue. I have custom modal which is getting shown/hidden just by adding CSS class. As soon as I show modal (when address bar is visible) and try to scroll within modal this modal get's closed. But when I first scroll down on page (address bar is hidden) then open modal I can scroll within modal without problem. Same happen when scrolling up within modal. That means address bar is causing this issue.
In other browsers there is no problem.
Any idea how to fix this?
Ok found the problem. Since iOS 15 safari address bar collapse calls window.resize method. That was the issue...
Related
On iOS 15 scrolling within an element causes the window to resize / toolbar to disappear, regardless of if you have the top or bottom toolbar. On iOS 14 this would only happen when the body scrolled. See gifs below, note - the yellow area is a div with overflow scroll and the body is not scrolling.
iOS 15
iOS 14
Code example here:
https://codesandbox.io/s/ios15-scroll-example-u7toi
Is this new behaviour intended or a bug? Is there any way to disable it as it makes quite a few websites look a little strange now!
I solved this problem for my case. Perhaps it will help you too.
body-scroll-lock library https://github.com/willmcpo/body-scroll-lock
Video examples of work
Before using the library (pain): https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/before.MP4
After: https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/after.MP4
I block everything except the "burger menu" (side menu) from scrolling after that menu is opened. When the menu is closed, all scroll locks are released.
Thanks willmcpo https://github.com/willmcpo and google translate...
PS: Read this issue https://github.com/willmcpo/body-scroll-lock/issues/236 It says that if you install the library through NPM, the problem will not be solved. You need to download it from GitHub - then it will be OK.
I found a really strange behavior when using a Materialize CSS modal in Firefox (66.0.1). It works fine in Chrome (73.0.3683.86) and MS Edge (where do you find the version?). I'm using Windows 10. It does this with the modal demo in the official Materialize CSS website as well.
The problem seems to start if you display a modal with enough content so that it displays a vertical scrollbar. It needs to have links or buttons to see the problem I will describe. You can simulate this by resizing Firefox so that its vertical height is small enough to make the scrollbar appear. Now close the modal. Then resize the height of Firefox so that the modal will appear without scrollbars. Open the modal and hover over a link or button and any hover effect that should happen, does not. Click once on any link or button and nothing happens. Click a second time and it works properly.
And even odder, after opening the first modal with a scrollbar, you can open the second without a scrollbar and do nothing for about 15 seconds and then the links or buttons will work fine.
When this happened, I tried right-clicking on the button to "inspect the element" in the Firefox Inspector. Instead of getting the button, I got the modal overlay element behind it. Note that when this happens, the overlay is not above the button or any of the modal content. It's not a z-index problem. To see whether it was a problem with the overlay, I added an onOpenEnd() function to the modal options that would remove the overlay as soon as the modal opened. I had the same problem. When I tried again to open it in the inspector, I got whatever was behind the button. So it's almost like the modal isn't even there until I click on the modal first or wait for 15 seconds.
I then tried to add some code to the onOpenEnd() function that would give focus to the button, but no effect with that. I tried tabbing to the button, but that didn't work either.
Just before submitting this I found another piece of the puzzle. As I said, hovering over the buttons when this is happening will not show the usual hover pointer. But if I hover above and a bit to the left of the buttons, the cursor does change. When I click there, the color of the buttons does change like it's been clicked, but the action (closing the modal) does not happen. Hmmmmm....
If you want to test this out, go to the Materialize CSS webisite and open the page for modals. (https://materializecss.com/modals.html) Reduce the vertical size of Firefox so that when you open the demo modal it has a vertical scrollbar. Now close the modal. Resize Firefox back to normal vertical height and open the modal again. Hover over the Agree or Disagree buttons and you won't get the pointer cursor. Try click once and nothing happens. Click again and the modal will close. Or wait the 15 seconds and then the buttons work.
Most of my users will have the modal open for more than 15 seconds so it's not a big problem. But sometimes they will open it just to check something and then want to close it. Sure they can click twice, but I'd rather it work properly. Chrome and Edge work fine. Firefox doesn't. Can anyone think of what is causing this and whether there is anything I can do in my code to make it work properly? Thanks.
In Xcode, the storyboard screen and the side bar of any Swift file keeps refreshing. How can I prevent this?
The sidebar's flickering issue is caused by the constant regeneration of the data while typing in a file and it can be really annoying.
To prevent the refreshing, switch to the Quick Help inspector, which actually stays static while typing:
I have a NSTabView with dynamically created tabs. Each tab contains a webview (created when tab is added). It works fine, but if a webview display a flash website, if you go to another tab, then back to flash one, flash page is upside-down (bottom of page is on top, completely mirrored).
Any idea about what happens and how to repair it ?
I finally solved the problem by removing the NSTabView. I show and hide webviews when needed, and it works fine.
I have an Enyo webOS application I am developing for phones. There are several text inputs on the main page, with a button underneath them--however, the button is not viewable below the textboxes. However, there appears to be a scroll lock by default on the main scene--so I cannot scroll down and see the rest of the content.
How can I enable my app to allow for scrolling within a VFlexBox view?
Thanks!
Ah, I found it--I need to change from enyo.VFlexBox to enyo.Scroller for the view. Works fine!