I'm wanting to have a little expand / collapse svg rotate on click in my React app and it sometimes just disappears after the click and I have been looking in the inspector and have no idea why it isn't visible. It's happening in multiple browsers and I have recreated it in sadbox.io.
It seems to be very intermittent (sometimes it happens on the first click, sometimes you can toggle the class on and off many times before it will disappear. If it doesn't occur after a good amount of clicking I think it will still eventually occur or refreshing the page might do something to have it trigger sooner.)
Any ideas / help would be appreciated!
Sandbox
Ok, it looks like I figured out how to fix it through trial and error and looking at how it was done in a different project. It looks like if you apply the class to a parent element of the SVG then this problem will not occur. I'm not sure of the explanation or technical reasons for this.
Related
I am a beginner and I have a project to finish it's to make a similar page as wikipedia, however, I am about to give up, just when I thought I finally wrote the code and tried to revise the browse / move it from the corner either every element follows the browser movement or it messes everything up, After many googling I even tried the WRAPPER thing as it is given in the code , please help
jsfiddle.net/gpe4jn0k here is the code
I'm an amateur web designer with HTML experience mostly. I'm building my own website for a hobby, and ran into this snag. I've only recently noticed it though, so I'm wondering if it has anything to do with the recent iOS update?
Like the title says, when I go to my website, everything is fine. Then I click on one of the links to the "Contact" page, let's say (or any of the links that take you to another page), and then hit the browser's back button to go back to the previous page, the button's image I had just clicked on ("Contact" button) has disappeared and I'm just left with the button's name I named it. This repeats for every button I click and then hit back in the browser. This only happens on mobile devices though (I've only had the opportunity to check on an Apple phone and iPad). It doesn't happen on my laptop. I've tried searching for answers to this, but can't find any. I've only just noticed this happening though, which leads me to believe it might be a software update issue? Although it's entirely possible I just never noticed before.
Here is my website so that anyone interested in helping can take a look and let me know what you think might be the problem/solution. Thank you very much for any help you may be able to provide.
https://www.atomicorchard.com/
It's okay on my end. Try optimizing your images and check your JavaScript. The problem may be occurred once that script is being executed. And try adding media queries.
I am working on creating a website with a background that transitions with a fade. I have an issue with display when viewing with Firefox. The site loads fine and cycles through the images, when the point comes for it to return to the first image it resizes to a tiny pic in the top left corner. This does not happen on any other browsers, and it does not happen with all of the images in the cycle. If I refresh the page the problem is fixed and the sizing issue goes. I have tried from other computers and the problem is consistent. A version of the site can be seen http://www.rhys-williams.webspace.virginmedia.com/ Any help with this issue would be a big help thanks.
SOLVED
I have resolved this problem. The issue is caused by the cycle changing quicker than the image loads. I added a second to the display time and it now displays fine :)
Remove div from this line -> so your code will look like:
<div id="slideshowContainer" class="slideshow">
I guess that firefox was confused because of it.
Edit: Also, there are few unclosed tags (html errors), but i think this was the main reason of problems. Also, document has no valid declaration... fix these things, and then try... i have tested locally, with base href, and all works fine?
Hm -> please try to remove this, too: next: '.slideshow'
next option should have selector for next button, if i remember well...
I used https://github.com/browserstate/history.js in a recent project to manage state changes in an ajax rich website.
Chrome exhibits a very annoying behaviour at times where it decides to reposition the scrollbar to some arbitrary position after a state change event. I have not experienced this problem with any other browser.
Does anyone have any suggestions? I would post code, but am not sure which parts will be relevant and I am hoping there is an obvious solution to this problem.
There are some obvious workarounds. Scroll to the top if that's what you want, or add a field to data object to store scroll position and restore it yourself. If it's a Chrome bug, work around it; if it's a feature you don't like, work around it; and if it's something you just have to implement yourself with three lines of code, work around it.
I have this problem with a link in an HTML page where the first click on it is not working (I am using Firefox). The second click takes me to the corresponding link.
Furthermore, on the first click the parent element of this link moves a little bit upwards. So I assume this is a CSS issue, but since the problem is there only when clicking and not when hovering over the item, I am unable to see how CSS could be cause this problem.
(This issue is there with some other links in the page too, but with a different behavior: Clicking on the links changes the layout a little bit, but the first click itself takes me to the target pages.)
It is probably not a JavaScript issue because I tried disabling JavaScript in the browser with the same results.
(Sorry that I cannot post sample code). I just want to know if there is any known issue that may cause this problem.
Check if this issue occurs in every browser. If no - this is a browser issue.
If yes - check your CSS may be some problems in it.
If still can't find problem - put code examples here