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
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.
I'm using Xcode 6. For some reason the Xcode menu toolbar at the top with everything from File to Navigate and Debug is missing. I've managed without so far but would like to find out if there is an easy fix. Not sure if it was there when I first installed. Appreciate your help.
Try View > Show Toolbar to make it re-appear. If this is not the toolbar you miss, please post a screenshot of your current Xcode interface.
Before:
Okay so I solved this one. It wasn't showing as I had made the window smaller to use alongside online tutorial. When I opened it in full window mode the top toolbar was back.
I have a popop on my page with cross button image.
When I open the popup for the first time everything is fine.
But when I close the popup and open it again, the cross button image flickers.
How can I Fix this.
I am facing this problem only in firefox. Are there any configuration settings which i need to make?
Got the issue. A button click function was written twice because of which the popup was loading twice and the image flickering happened.
First, the links are to screen shots of my "problem". Stackoverflow would not let me post images b/c I don't have at least a 10 reputation.
I am not sure what I did.
Shut down my computer, I think there was an OS X update pending that installed. When I went back to my Xcode project it presented the normal screen
https://docs.google.com/file/d/0BzpqJUv4HwzCbldESkRnZHR0Tk0/edit
But then when I went to open it up the following screen w/o the editor or any of the normal layout opened up.
https://docs.google.com/file/d/0BzpqJUv4HwzCZ2ZJOF9fSzAybUk/edit
I tried tinkering with the layout and view screens, but no real help. Not sure what happened. Any help would be most appreciated. Basically, it seems like I am missing the editor and utilities panes.
Thanks,
You see that little button with the left arrow and two vertical lines at the right upper end of the "Groups and files" view? Click and drag it left, see it this can help.