navigation button images disappear on mobile when hit back button in browser - html

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.

Related

How to force Chrome to show latest image changes on website

EDIT: Please stop suggesting to clear the cache. That will obviously not solve anything for the users who may have visited the site before.
I know how to force the browser to use the latest CSS version. This is not what I'm asking.
I also know how to clear the cached images on the browser. This is also not what I'm asking.
I also know this could be solved by changing the name of the image. I don't want to do that.
It surprises me not being able to find an answer to this issue anywhere since I came across this problem multiple times.
When replacing an image such as a logo that's on every page of an old website, you may want to simply replace the image without changing its name so you don't have to change the image name on every HTML page.
The problem is that Chrome continues to show the old version of that image no matter how many times you refresh the page.
It's the only browser I know that does this. It's incredibly annoying.
Isn't there a way to force Chrome to show this change, or even request Google to update the image that has been replaced?
Thanks.
ctrl shift i (to open the developers tool)
click network
check the disable cached data from the top of the window
or u can use the shortcut i think ctrl R (i am not sure of it) but using the developer tool ->network ->disabling cache then refreshing the page works fine 100%

Translate-Z Mixing Order only Mobile

I'm having a weird problem with a website we are developing. This site has a parallax effect in it, and it's implemented without JavaScript using only translate z and scale (you can check this in http://keithclark.co.uk/articles/pure-css-parallax-websites/)
The problem we are having is that in chrome for desktop the site seems to be ok (you'll see the problem on the second picture):
But when I turn "devide mode" on, this is what I see 90% of the times (also in mobile and also, most of the time, but not all the times):
As you can see, the slider above "DESTACADOS" is gone, but if I click any button, or execute any action (click on button or link), the slider appears again.
The problem is kind of hard to pinpoint, so ask for whatever clarification or specification you need.
Thanks in advance.
EDIT 1:
I have tried to make some small example but I couldn't. It works fine for each part but not on the whole.
This is the full site:
http://192.185.67.199/~arielces/animations/#/commerce/main
Another thing I've noticed is that when in device mode, if you search the div with the magnifiers or just move the console from bottom to right, the content shows.

Jump to a specific entry not working for several browser

i was working with Screen and some Qwebkit based browser. I do thumbnails of specific entrys of a webpage via Achnor. That worked fine till some days.
The issue is that a lot of webbrowsers (including my crawler) aren't able to Jump to a specific Anchor of a post entry. This issue occours only on this specific Website by Blizzard Entertainment.
I took a look into the webpage several times with firebug but i can't see the reason for the Bug. I hope that someone is able to tell me whats wrong with it.
http://eu.battle.net/hearthstone/de/forum/topic/14899382319?page=4#69

Google Chrome issues with impress.js

Sorry for the rather unspecific title, but I can't say it any better.
I'm making a site which works flawlessly (as far as I coded it) in Firefox, but since only insignificant changes it stopped working in Chrome, and I have absolutely no idea why this is! Here's a link to the site, so you can try for yourself:
http://aichorn.com/original
as I started working on it, it worked great in Chrome, but since yesterday it stopped working in Chrome. normally you are supposed to be able to click on "trail-infos" and then a box with a link should fade in. you can get to the box at the moment only by pressing spacebar or clicking on the right arrow...once you are on the trail-info box there's a link saying "Allmountain", and you should be able to click that link. but it simply doesn't work. as if there's an invsible overlay or something, preventing you from clicking! I cant figure out what's the problem, been trying z-index and stuff, but nothing helped! I've undone all changes I made from the last working version, but still it wont work. this is driving me nuts, since i can't find any reason!
I'm using Chrome 33.0.1750.154 m and the website is working fine. Could be an issue with your PC or temp internet files (Clear cache cookies etc) to try and get working.
I am able to navagate left through all the different boxes that move in 3D space, Trial Infos allows me to click on the small box and the content loads.. I'm assuming that is meant to the be product.
If not show screenshot comparisons what you are getting on FF and what you are getting on Chrome.
Interesting concept for the website also! Best of luck!

Chrome and div background layers not loading properly

This is a very weird thing that i've experienced . I've been working on a project lately www.bandness.com, which allows music groups and bands to upload their music. The artistic department has been very keen and precise and they've done an incredible work that allows the bands to have gorgeous profiles .
However, when on Chrome (i've noticed this only happens in chrome), when you enter a profile the background image doesn't load properly until you scroll over it or you "select" the div layer or the ones on top of it.
here are some examples of what i'm talking about
you need to select the layer so it works properly, and that is bugging annoying!!
here you have another example
and this is how the website should be seen without the bug in the left screen
Why does this happen?
The website is www.bandness.com, click on any of the groups where it says "TOP 5 GROUPS" or on the group for each song in "TOP 5 SONGS" and you'll probably spot what I'm talking about.
This has happened to me in chrome, on a macbook pro with the latest OS release. As well as in Windows 8. It bugs me because I have NO idea what is causing this and I fear a chrome bug.
How could it be fixed? Any suggestions are appreciated, I thought of using jQuery to make the layer dissappear/appear or something like that... but i'm unsure of whether this will work.
Ok, so I'm posting this as a help for anyone that suffers the same consequences of this bug at any time.Bear in mind the answer implies using jQuery.
As Christopher kindly pointed out earlier, I tried to do $(SELECTOR).hide().show(), but that didn't make it.
Then I decided to try with $(SELECTOR).hide(100,function(){$(SELECTOR).show()}); ensuring that the effect of showing only happens once the div layer has dissapeared.(that way it actually appears and dissappears).
The solution worked, however this should not be needed and it doesn't provide an answer to why this is happening, but it "kinda" makes the trick .
$(SELECTOR).fadeOut(100,function(){ $(SELECTOR).fadeIn()}); makes this happen in a much fancier way. Again as I said this isn't a fix, it's just a workaround that might get you somewhere if you ever suffer this problem!