I have an explicit problem with displaying my mega dropdown menu only in Safari browsers. This is the case for the most Apple devices. Only one test on the most modern Iphone worked a little well but still with bugs. The other devices didnt't open the dropdown on click, neither on big screen nor on small screen (I wrote it responsive). I already checked, if the installed Safari on the different devices is actuallized. This doesn't fix the problem. Also the -webkit properties doesn't fix it.
I used this multi-level dropdown menu by Victoria Kronsell:
https://medium.com/swlh/building-a-css-only-responsive-multi-level-mega-menu-ee0a3781cc3f
Just after writing my question I have found a solution and still posted the question, just in case some other people had the same problem. If not necessary I will just delete the question.
The code was provided by Victoria Kronsell, see her example on CodePen:
https://medium.com/swlh/building-a-css-only-responsive-multi-level-mega-menu-ee0a3781cc3f
She already stated that there will be problems with Safari, because "Safari, for example, does not apply a :focus state on click".
The solution is working with polyfill. I have edited my code with the following scripts and now the menu opens in safari browsers:
https://gist.github.com/NickGard/43328a4e223698e6a63cbff410e35342#file-safari-focus-polyfill-js
https://github.com/matteobad/focus-within-polyfill/blob/master/src/focus-within.js
https://github.com/WICG/focus-visible/blob/main/src/focus-visible.js
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 have a problem with a tinymce editor in a Internet Explorer 8 application we build at work here. It works fine in chrome and firefox but those are the browsers developpers use. In IE8, the buttons are all stacked and i have no clue where to start with to fix the problem.
Here is the image:
PS: Please dont tell me to change browser, i can't overrule technical department for 900 users. It's sad that i'm still stuck with supporting IE8, but thats life!
Found the problem, it was the document mode. I added a meta to force document mode following this QA: Force document mode=IE8 Standards
I added a contact form with the Ninja Forms Wordpress plugin at my portfolio website.
It works great, but not so much on my iPhone 4 (and probably all other mobile devices). If I tap an input field it does focus and brings up the keyboard, but doesn't show my input and stays empty. Can't figure out what the problem is..
One of your stylesheets has -webkit-user-select set to none. This property controls the actual Selection operation.
This feature is non-standard and is not on a standards track. Read more in the Mozilla Developer Network docs.
I have tried to get the data-role="backbutton" kendo mobile ui feature to work but I am having issues. When testing the app on my iPhone 4 I get stuck in my app because the back button breaks the UX.
What happens is that when I am testing, I click heaps of back buttons (as they are used quite heavily in my app) and then randomly one decides to slide the previous view into the screen but only goes halfway and then snaps back (or some other type of visual glitch occurs). Then after that, all my navigation breaks down and I get stuck in the last view that I was in. Or better yet the links go to places that they are not supposed to. My tab bar does not work and either do links in the header. I have to exit the app completely, remove it from operating and try again. Seriously something wrong going on here.
I have tried to programatically add the back button by following the Kendo UI documentation but that does not work either. I am left with a button that does absolutely nothing when clicked - it may not even solve the issue anyway. I have looked using developer console in Google Chrome but I can't see any obvious issues.
Has anyone using Kendo Mobile UI experienced this issue before?
I downloaded the latest release of the Kendo UI build and the problem seems to have been resolved. Surprising! I assumed the Kendo framework was a bit more mature to be experiencing such a big issue. It was occurring when using slide transitions in navigation. Here is a link to the bug post on Github https://github.com/telerik/kendo-ui-core/issues/66
I have C# MVC web app that has some textboxes that in IE9 you can enter in text, but you can't highlight via the mouse or via holding shift and the arrow keys.
I've looked around on the web and i've found other people experiencing this, with no solution.
One site i found claimed it was an issue with IE9 on pages that make multiple AJAX calls, which my site has but, removing AJAX really isn't a solution.
Is there a way via code or via settings in IE9 so that users can highlight text in a textbox? Or is this an outstanding bug in IE9?
Edit:
The website works perfectly fine in chrome
Turns out it was a rogue jquery statement that was
(.someClass).disableSelected()
that was disabling selection on every single textbox in my site. The kicker being that IE and Chrome handled it one way and Firefox a different way making it seem like a different bug
I had the same issue.
Select Tools on the IE bar / F12 developer tools. under the tab ( Document Mode IE9 standards ) check marked Alt+9. Closed the developer box. Closed IE9 opened it back up and everything worked as it should.
Hope this helps.