CSS fixed background issue when scrolling - css

So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily

Related

Structure misalignment solves itself after refreshing CSS values on inspector

I don't really know how to phrase my problem. My page is working fine and all, responsive included (resizing my PC browser). But when I open the page from a browser in an actual phone, the blue section with icons gets all messed up.
There's apparently nothing wrong with it on the code. The thing that is driving me mad is, and as soon as I change anything from the inspector, it corrects itself (but that's something my users aren't going to do). It doesn't matter whether I change the color of a random text or anything, it reacts correcting itself whenever I make a change in the CSS on the inspector.
Can anyone help me figure this out? I'm attaching a screenshot from my phone before and after changing CSS on the inspector:
In which mobile did you try to show it?
I don't know if you solved it but i try to see your website from my smartphone and i show it correctly.

Slideshow Causes Weird Graphical Glitch

Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform

CSS position between Win / Linux / Mac Logo Position

i've a little bit trouble to fix one thing, may you could help me out with it?
I try to make Chrome/Firefox works with a Logo sliding problem. You can see here the first pci is how does it looks like in win with chrome or firefox. IE looks normal like the second pic.
What did i wrong in the code? many thanks in advance.
http://abload.de/img/bildschirmfoto2013-067oqb8.png
http://abload.de/img/bildschirmfoto2013-06u6rho.png
I can't tell you unless I see the CSS. Post the css on something like pastbin.com or if it isn't real long then add it to your question and then you are likely to get some answers, but I can't tell you what is wrong with your CSS from a picture of the results. Too many possibilities.
Now I'm wishing I had asked for a demonstration instead. Am I correct in thinking that the text is part of a horizontal menu and the logo is completely separate and not contained by the text container at all? If this is the case and the image looks and behaves like you want then perhaps it is the menu that needs tweaking to get it to match up correctly. At first I was thinking this was something like a div containing text and an image or having an image as a background.
If you could go ahead and post a link to a page or a pastebin or something that has the html and the css for the menu and the logo together then I'll try it out myself and see if I can find the solution. Someone else may already see it, but I'm still not seeing the clear picture of your situation or a resolution to your problem yet.

jquery mobile ui-icon not appearing sometimes?

I have a strange issue with jQuery mobile. I am using the latest version (1.1.1), though I also had this issue with 1.1.0 .
The issue being that my icons sometimes do not appear, as in, the image itself does not appear. I test this in chrome. I am not able to reproduce it on purpose, it is a problem which seems to occur randomly. When it does occur, it looks like the top header in the image below. However, when I open the element inspector in chrome and uncheck/check the background (or indeed any) property, the icon magically appears. Does anyone have any clue what is going on?
An image to illustrate the problem:
Edit: to clarify, my associate has had the problem as well. This happened in chrome, but on a different computer, so I doubt any nasty plug-in or so is playing evil here.
Edit2: a couple of things I have tried to resolve this problem.
preloading through javascript: implementing a line of code to make sure the background is downloaded.
statically adding a to the page to see if the controls are downloaded.
The strange thing is that nearly everything is drawn, apart from the background-image. This occurs for all the icons by the way, so the ones in listviews etc as well. Navigating through pages or reloading does not matter.
actually your app is not able to locate the jQM's CSS so I would recommend to use the CDN's for getting your css.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
Hope it helps.

drupal - problem with quicktabs

Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks

Resources