EDIT:
A colleague worked out what was wrong. It was because the aside element had z-index: 2. Although it is fixed now, I'm not sure why that z-index: 2 was causing these issues in the first place. If anybody knows why, I'd like to know.
I'm having a rather odd issue on a website i'm working on. When on the architecture section, I click on one of the blocks to open the project, and it works. Almost. When one of the projects is open, the aside on the left does not scroll correctly. It distorts and splits up. Here is a screenshot:
But the odd thing is, the interiors section, which uses the same code, works fine. I have just recently finished re-coding the news section with a new design and more features, so it could be something to do with that. But, so far, I have found no connection with other sections on the page.
There are other errors on that specific page too. The Close button and next button hover events don't seem to be firing. However, if I open Dev tools and set the width of the close button to 29px, the hover event works, and the cross goes orange.
You can access the site at http://dev.guyhollaway.co.uk/
If anybody has any ideas, I'd be very thankful.
This happens on Google Chrome on both Windows and OS X.
Thanks in advance.
Related
The search icon on my mobile website suddenly stopped working recently. It's supposed to toggle open a search bar; however, now when I click it, nothing happens.
When I long press via Chrome on mobile it displays "about:blank#blocked" and on Firefox on hover it displays javascript:void(0).
Not sure what caused it to stop working and it's a bit frustrating.
If anyone has any insights or ideas on how to solve it, that would be super helpful.
My website is www.gentlemanwithin.com
I see your issue:-
Your issue is when you are trying to access custom search form that unable to access because you added an extra search button which is not belongs to that. So you try toggle function to show yellow colored area of your code. After it your issue will solve. Below I have attached your site screenshot image, that you can see it for the reference.
I'm trying to click a button in a React app, and while it works on desktop, it does not work properly on mobile. I need to long-press or double-click, and play a little bit until the button finally works.
I have replicated my problem in this demo.
If you open the page on a desktop browser and attempt to open the hamburger menu, it should open right away. However, if you open it in mobile, it will not work right away. You will also see the menu jitter a little bit off-screen. Attempting to close the menu by clicking on the overlay has the same problem in mobile.
Why is this not working properly on mobile? How can I get the button to work when I tap it?
I added cursor:pointer to the button after seeing this somewhat similar post, but this doesn't help.
This problem has occurred in the past to me, and I was able to solve it using onMouseDown but it doesn't work this time, I'm guessing because I'm using a component that is imported from a package (react-burger-menu) and can't override its onClick function? I'm not sure what is happening.
EDIT: Solved. See my answer.
Turns out it works if I fix the stacking of elements. I had nested my navbar component inside the MapContainer, but this was making things wonky mobile-side. I moved my component outside the MapContainer, and things worked.
I still don't understand why it went wonky mobile-side and in iOS only, but this problem at least is solvable.
Fixed example is here.
My map token has been removed, so you can use your own to substitute, but it is not necessary to have the map showing to see the problem/solution.
So, I've probably stumbled upon the strangest bug/feature I've ever seen. I've developed a website which helps you read foreign books. See this book (or any book on the website, it doesn't matter): https://anylang.net/en/books/de/heaven-has-no-favorites/read.
Try to quickly move your mouse hovering on words/sentences, maybe click on something etc. Everything should work pretty smooth.
On mouseover a word quickly becomes orange, on click the translation quickly appears etc.
Now click on the login button:
The first input should become focused.
Then close the modal and try the first step again. Everything becomes very laggy. The lags won't disappear no matter what you do, except:
Click on the page number:
Lags disappear. Completely.
The same result (lags) can be achieved by:
Clicking on a word inside a translation tooltip
It has a contenteditable attribute, so the behaviour is exactly the same as in the first case.
Click anywhere outside the tooltip, closing it and causing the lags.
Lags still disappear if you click on a page number (or, probably, any input[type="text"] on the page (but not in modals))
Some things to consider:
The effect doesn't disappear if you lose focuse in a modal and then close it.
The same effect can be achieved by focusing in a modal and then manually removing a modal from dom. So javascript is not the problem.
If you don't remove a modal from dom but apply "display: none" to it instead, everything is ok, no lags.
My guess is that the browser gives higher priority to elements where input[type="text"] is focused and doesn't respect it when an element with the input is removed from dom. Any other ideas? This thing really boggles my mind.
If you do a performance profile of your site while going through this process, you'll see that your memory allocation continues to climb as you interact with the page. You'll also notice that the more text you hover over the worse the lag eventually becomes.
This is indicative of a memory leak in your code - possibly caused by event listeners that aren't being cleaned up properly.
Without an in-depth review of your code it's unlikely anyone here is going to be able to pinpoint where the exact problem is, but hopefully I've pointed you in the right direction!
I am using jQuery accordion on a web page. In IE 8, it gets hidden sporadically sometimes when user clicks on some other window. I am not able to get why is it behaving like this. When I inspect element in HTML developer tool I could see accordion and if I change some value in that, accordion gets visible again. Can somebody please help me to identify what is the problem? If I use debugger mode everything works correctly.
I looked at code carefully and observed that accordion code was added in one extra tag but strange that only IE was not able to run it properly. So I removed that extra wrapper and its running properly now.
I have an angular site, everything's pretty async. Dom elements render after page load and things just pop in. Sometimes, around 10%, of times when I load the page after it finishes loading scrolling down is impossible. On Chrome OSX no scroll bar pops up when I use the mousewheel or the spacebar. It just appears stuck. Note that the page is not frozen, interacting with most elements work just fine, just the scrolling is broken. Only the up down keys work. Once I click on the up down keys it becomes fine to scroll with mousewheel and spacebar.
What causes this problem and how do I fix it? Thanks.
Please check other browsers!
I can only confirm this issue in Chrome...
see google help forum: Anyone having trouble with Google Chrome unable to scroll, focus, etc?