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!
Related
I'm sorry since English is not my first language : and since I can't even describe what's going on in my native language, this is going to be complicated.
I'm coding a website and everything was ok so far. But at some point, I attached a link to an image and used hover in css so the picture "shines" when the cursor is on it. The only problem I have is that, when the mouse is on the picture it kinda "panics?" and starts to changing from normal mouse to the pointing finger really quickly. I also struggle to be able to click on the picture when this happens. (I'm on macOS Monterey 12.2 btw)
Since I know I explained that terribly, here's a YT Video showing my problem.
Thank you and sorry again for the whacky English.
Edit 1: Ok so I'm using Brave Browser, and this problem doesn't happen on Safari when I tried it on there, so I really don't know if it's my browser being weird and if I can fix this in any way
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.
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.
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!
One of the pages on my website is pretty tall. It's under 200KB in size, but it's a series of tables that takes a lot of vertical space. After about 40 screenfuls (about 1/4 of the total scrolling height of the webpage), it just stops drawing: everything above that looks fine, and everything below that is plain white background -- except the footer (in a different div, I guess), which shows up fine at the very bottom.
I've asked around the office, and other people have seen this before, but don't know what causes it. We certainly have other pages here that are just as tall, and have no problem. I've seen pages render fine which are much longer. It's not a complex document at all -- some nested divs, some tables (4 or 5 columns, a couple hundred rows each), some CSS.
The page renders great in both IE7 and Chrome. Only Firefox 3 does this.
Any clues as to what's causing this? Or a workaround? I don't even know what to google for here.
EDIT: I've seen this on another, completely unrelated page. In both cases, it cuts off at about 33000 px from the top -- ha. I know FF3 can have divs and tables longer than that. Anybody know what they might be using a 16-bit size/coordinate for?
Sounds like this may be related to Firefox Bug 215055 or Firefox Bug 333994. Check these out. If it is indeed related, you can always attach your testcase to one of these bugs and add your comments to the bug.
I also recommend, like zodeus does, trying a nightly build or a beta of 3.1. If it's fixed there, that doesn't mean you force your customers to upgrade, but at least you know it's fixed in a future build and you can campaign for Mozilla.org to bring the fix back to a more current build where you might get people to upgrade.
Try downloading the Fire Fox 3.1 Beta or Nightly Build. They have reworked a lot of their internals. If it works there then I would say it's a reported and fixed FF3.0 bug.
This bug filed in Bugzilla may be related...