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

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!

Related

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.

Chrome Developer - Elements section broken

I was wondering if anyone has ever come across this issue before? I loaded up Chrome today and for some reason the entire left hand side of the elements section is broken.
I can navigate down using the keyboard arrows and see the breadcrumb selectors change (as shown in the picture) and for some reason the top of the document seems to display (but looks very odd indeed), but anything below the 'if greater than IE8' doesn't show whatsoever.
Has anyone ever experienced this before? Am i better reinstalling or launching a support ticket?

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!

Get firexfox developer toolbar on a different tab or popout

I hope the question police have something better to do while I can get some much needed information.
I try to do my HTML and CSS on firefox using the Web Developer Toolbar addon. It saves a lot of time but I have a very simple question. I have searched all the options in the addon. Is there a way to get this thing to pop-out like firebug. Cause it takes up half the screen while doing the page and that becomes a pain really fast.
I know its a very simple question but if you can help me out, thanks!
I played around with it and it seems you are right. It doesn't have a "separate window/tab" feature. But here are two thoughts for what they're worth.
I assume you have dual monitors cuz of your question. There's a [position] icon next to the "Edit HTML" and "Edit CSS" tabs. (it looks like a lil window with a green arrow. Click on it to reposition the editor to the left or right of your browser, then minimize FF and stretch it across your monitors :D haha! but seriously, I tried it and it works perfectly!!
Lame answer: If that doesn't suit you, ask Chris Pederick on the WDT forum: http://chrispederick.com/forums/
Good luck!!