iOS 15 safari toolbar now hides when scrolling within an element - user-interface

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.

Related

Update frames button gone in Xcode 8.1

After updating to 8.1 (8B62) there is no longer a button for updating frames in a storyboard/xib, in the Resolve Auto Layout Issues shortcut in the bottom right corner of the Interface Builder. I heard talk about putting such a button on the new and fancy touch bar, but what does this mean to a mere mortal like myself? Do I have to start using the menu bar?
Now:
Before:
Update frames is a separate option now and not inside the drop down. I am on Xcode Version 8.1 (8B62) and I can see the below button:
It is enabled only if the control is misplaced

How to fix: disabling size classes in Xcode 6.2 trashes storyboard UI but keeps guides

[EDITED] After spending a couple of days on a iPad app (utility s/w for myself; not for release), I accidentally clicked on disabling size classes in Xcode (6.2). I only want to turn off Auto Layout temporarily so I could figure out why my popover scene was not rendering.
Now, all the UI elements are gone but the guidelines for both the main scene and the popover scene are still around. History seemingly shows nothing that will bring back the UI elements. I closed the Xcode project and opened it again, but only the red guidelines are visible.
Has anyone run into this? Any idea how to fix this? [EDIT] I'm referring specifically to the UI elements and getting them all back -- else I'm going to have to spend a couple of hours reconstructing and positioning them. I browsed StackOverflow and Google Search but I've not seen any relevant suggestions.
First, when disabling auto layout it will disable the size classes as well.
I would suggest that you update your Xcode to 6.3. Then that will probably be gone.
Hope that helps :)
Edit
regarding the comment
First off I would print the frames of the UIElements to see whether they are still on the screen. (Using `println("(button.frame)")
Then, if they are not there, change their frames / centres) to somewhere on the screen.
If they are in the bounds, check their sizes to make sure they are large enough to be visible. If they are then make sure they are not hidden and their alpha is 1.
In storyboard you can open the side-bar and then change the element's position in the Attributes inspector as shown here:

Jasny off canvas menu reappears when closed

I'm using the jasny offcanvas menu which works well but strangely, when I open and then close the menu, it slides out and then reappears. I assuming this is a z-index issue or maybe an HTML structure problem, but I can't see it.
Current development site is at http://powerdirect.petersenuploads.co.uk/, shrink the window to <768px to see the effect.
What am I missing here?
Many thanks
Pete

No horizontal scrollbar in Xcode's Interface Builder

When I try to edit a storyboard file in Xcode (Version 5.1.1 (5B1008) under OS X 10.9.3) I can only see the vertical scrollbar. Moving around in the horizontal direction between view controllers is not possible. The horizontal bar doesn't show when I hover over it. It only briefly shows when I select past the visible area but it immediately disappears afterwards and I can only scroll by a few pixels at a time this way.
I have tried restarting XCode and the OS but it didn't help. Scrolling was possible before. It stopped working for no apparent reason this morning. I have not updated XCode nor OS X or messed with the system in any way since it was last working. Has anyone encountered this problem before? Do I need to reinstall XCode at this point?
Press Shift + Scroll Mouse this will scroll preview in horizontal
It's a not bug, it's a feature. It wouldn't be a problem if you use the Apple mouse. There is a workaround for a typical 2/3 button mouse, although it would affect all horizontal bars across the system. Just follow System Preferences->General->Show scroll bars, and select Always.
I have been struggling with this as well. The only solution I found is the following:
So there is a mini map for the storyboard that hovers over the right upper-side.
If you can't see it, just click on the "Adjust Editor Options" button and make sure Minimap is selected.
This is the best way to move around just like you are using the scroll bars.

Google Chrome and drag to scroll

I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.

Resources