Google Chrome issues with impress.js - 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!

Related

Strange display/rendering issue on Google Chrome that varies by device/OS

They say a picture is worth 1,000 words. Let's hope so.
To be clear, I am unable to see the drop shadow around the document, grayscale on the document ruler, and gray etchings/borders on the menu UI. Basically, everything is whitewashed. I am incredibly bamboozled.
These are the facts as they stand:
This problem occurs on my desktop (Ubuntu/Windows10), but not on my Macbook Pro (Catalina). All OS are using Chrome that I have signed into.
I have disabled all of my Chrome extensions and experienced the same issue.
I have used multiple monitors and experienced the same issue.
I have disabled my Chrome theme and experienced the same issue.
If I were to take a screenshot of just a select portion of the screen, the very act of that bounding box reveals the missing grayscale and shadow! However, when the screenshot is actually taken, everything is whitewashed. Similarly, if I click "Send Feedback" on Google Docs, a menu UI pops up, the rest of the web page is grayed out a bit, and all the missing grayscale and shadow suddenly becomes visible.
This happens on other web pages. The best example I can give is dndbeyond.com - I cannot see the little checkboxes for my spell slots because they are whitewashed and do not have the drop/box shadow.
I hope I've presented the information correctly. I don't know much/anything about what's going on here and I certainly lack the vocabulary to be successful at Googling my answer. Any help would be greatly appreciated. Thank you!

MS edge graphical anomalies

On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png
Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.
I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.

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

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.

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.

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!