I'm trying to add a CSS slant to <section> elements on my page, which also serve as backgrounds for a "parallax" scrolling effect.
I'm encountering an interesting problem. The slant works on the first <section>, but on the second (or any after that), the background image is moved down, or the flow of the div gets messed up. I'm not sure why this is happening.
I've made a jsfiddle of the problem. Any ideas?
If you open the fiddle in Safari, that's the behavior I'm expecting.
Update: It actually has nothing to do with the parallax scrolling. It's just the combination of background-attachment: fixed and slant.
Related
Safari-specific:
I have got a page which is simply a background with an iframe centered in it. The iframe uses transform animations on :hover, and these cause the iframe content to make a little unwanted 1-pixel shift to the left only in Safari (tested in Chrome & Firefox).
I'm not sure what might be causing Safari to do this.
My iframe is width: 100%, so presumably the frame itself isn't
shifting, only the content.
The shift only lasts for the duration of the animation, not the hover.
The shift doesn't occur on the page that is the source of the iframe content, only once it is displayedcwithin the iframe.
Has anyone encountered this issue in Safari?
Page with Safari issue: http://www.bladesnpc.com/index-02.html
Content within iframe: https://perchance.org/blades-npc
I am managing the element centering with flex. Changing the flex-direction to column solved the Safari problem—although this particular fix only works because I am centering a single element on the page.
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
This is the strangest bug I've ever encountered with chrome, unfortunately I cannot show you example images because of legal restrictions but I'll try to explain it as good as possible.
So I'm building this website which has an infinite scroll through viewport-sized sections. In the first section I have a form and an html5 video with position fixed in the background and then simple background images for the followup sections, odd numbered sections with background-attachment: fixed; which gives somewhat of a parallax effect.
Now the very odd thing is: as soon as I have focused one of the form inputs in the first section, all the sections with background-attachment: fixed; lose their background image... it's still in the CSS rule but doesn't get rendered (just white).
I tried several solutions for similar issues like this SO thread or this post. Now the funniest thing with the second one is if I add -webkit-transform or -scale to the sections with fixed bg images, the problem occurs right away without any focusing... I really cannot figure this out.
I hope someone can help me with this issue because it's pretty important to have that parallax like behavior.
Here's a jsfiddle showing the problem anyway, not exactly like on my page but you can see the bug, there the video is shown instead of the image, but on my page I set the video to position absolute after scroll has reached the 2nd section, so it's just white...
I too have encountered this problem.
The thing is that background-position will make content fixed at that position based on the browser window.
For parallax effect, try with some plugins
I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.
It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.
The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.
I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.
Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.
Thanks for any pointers folks - this one has me stumped!
Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.
As I know, the answer would be WebKit in CSS
Internet Explorer, Firefox and WebKit are three different things.
Webkit is used by Safari and Chrome.
moz is for Mozilla
o is for Opera
"normal" is for Internet Explorer.
You can read more about here
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.