I have been struggling a lot lately with this problem and I have not been able to debug the root cause of the problem. At first when I installed materializecss on my website it worked absoulutely fine but when I designed the <nav> with my custom CSS then it stopped working properly.
This is full screen view of the page,
This is mobile or tablet view,
And this is where the problem starts, as soon as I click on that list button the screen freezes till I click again. Here's the view of that,
Waiting for a quick response. If you need any other info, just ask :)
Do you load
$(".button-collapse").sideNav();
at least in your init.js?
Related
My website’s menu is working on desktops and large screens. when I resize my browser to a small size or open my site on mobile then menu toggle button does not work and the menu dropdown does not show up.
My website running the latest Version: 3.2.4.
I also tried deactivating the plugins and clearing the cache but nothing works.
Before the update, I was facing the same issue but when updated to the latest issue goes away. now it’s back again.
To review the issue please check on the website.
Please help me.
I tried to look into this but nothing I do seems to work out.
When I use Chrome, I can click on the link located right below each image in the gallery without any issues .
When I use Safari though, I have to click several times and only a specific area of the link will fire the window.
Here is a screenshot of the link I try to trigger on Safari:
The problem arises when clicking on any of the items listed in the image gallery.
I'd appreciate any help, thanks!
I have had a look over the site you share a link for using the timeline and resource debuging on Chrome and Safari.
It would appear that the issue with the link is not that it doesn't work on first click. It is that the DOM has not fully loaded. If you wait till the DOM has finished its first pass at the HTML, approx 4 full seconds on my connection(~72Mb), the link will work on first click even before all assets (images and JS) has finished loading.
On Chrome this particular page seems to manage to loading the HTML in under 1.9 seconds, before starting to load in assets. Which is why it feels like the link works first time.
Here is a Google analysis of yuour page that reports the same finding. Note Time to Interactive is 14 seconds
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcfcj-immo.com%2Facheter%2F
I have recently deployed a website online using bootstrap as the front-end framework. I included the jQuery button to have the menu dropdown on clicking on it. During tests using my Chrome browser emulator, the navigation seems to work well, with it dropping down over the rest of the website content. However, on checking the same site using my iPhone 4s, the nav shows briefly for a split second and then disappears. I have fought tooth and nail with the CSS, but I can't seem to crack it. Any help would be greatly appreciated.
The web address is www.dof.com.ng
Thanks in advance.
Meteor now support mobile apps. That's great. However, I find that the app running as a mobile app is not the same as running in a mobile browser.
When it runs as a mobile app, if the user wants to input to a text field, a soft keyboard shows up. Then, after the user finishes and click the button (at that point, the soft keyboard is still shown), the app brings to another page. However, the new page renders as if the soft keyboard still exists so the lower portion of the screen is blank. The elements that are rendered to a fixed position (like footer) still shows up at the bottom though. Even though the lower portion of the screen is blank, the elements are still there. If I tap the blank portion, and if there is a link or button in the place I tap, the app still brings me to the new page. Since I use Meteor and ratchet, I don't know which one is the issue.
I suspect the issue is that when the user clicks the button, the Meteor renders the new page immediately, but the soft keyboard get hidden afterwords.
This situation doesn't happen when the meteor app runs in a mobile browser, however.
I use meteor, iron-router, and ratchet. The issue is identified in an android 4.X device. Any idea how to fix the mobile app specific issue? Thanks.
PS. If I delay firing the page transition by a second, I don't have the issue. So my suspicion is correct that the page transition happens before the keyboard is hidden.
I'm building a contact form for a mobile website in HTML5 and CSS. It is the same form I use on all mobile website and after not working for 5 hours I pulled the code straight from a working site I built and it still doesn't work properly.
The issue is when you go to the contact page it shows the contact form, but with the labels centered and the submit button image isn't showing up. I must refresh for it to bring up the correct CSS file to align the text left and show the submit button. Initially I thought it was from a CSS/JS conflict with my menu at the top so I pulled that and it still causes the same problem. I have cleared the cashe on my phone and web browsers and they all work the same.
Here is the link: www.lpokc.org/mobi/contact.php after going to this page hit refresh and you will see the difference.
My question is, is this a caching issue, is it server side issue, or is it a conflict in my coding. I'm not good with posting the code on this site but if you go to the mobile site from your web browser you can just right click and view source to see my code. I have a boiler plate html core file with boiler plate CSS and custom CSS.
Is there some sort of script I could use to make this page auto refresh one time on page load then not again after the reload? I don't want to use an improper fix like this but I have been working on this issue for a day.
The left side is before refresh. I have pulled the code from the site now but I think it was a js conflict because it was auto loading the css from the menu when the link for any page was clicked.
I'm seeing it fine on my end. Seems to work flawlessly, but if you are still having a problem, you could either use cookie or session variables. If the variable does not exist, you can use the php function header( 'Location: http://www.lpokc.org/mobi/contact.php' ) ; to "refresh" the page. It's actually just a redirect command, but if you are sending them back to the page they are on, it is pretty much the same thing as a refresh.
It was a conflicting issue with my menu JS/CSS. I pulled it and now everything works fine.