I'm trying to create some cool CSS animated clouds. It works perfectly on modern desktop web browsers, but has issues with MobileSafari on iOS 7.
The code I'm using involves cycling clouds from margin-left 0% to 100%, to -100%, and back to 0%. This causes the browser window to be stretched, with a horizontal scrollbar appearing at the bottom. overflow-x: hidden solved it.
However, MobileSafari doesn't seem to support overflow-x properly, resulting in a stretched screen with an unneeded scrollbar on iOS. The clouds currently have position: absolute to move independently of each other, but I'm noticing setting position to relative fixes this issue on iOS. However, that brings me back to the original problem that absolute position fixed, which was randomly overlapping clouds. I'm wondering if there's anyway to have elements move independently of each other without absolute positioning.
The website is http://team178.github.io/DreamNext
Let me know if this explanation needs to be clearer. Thanks.
The solution was to make a container with relative positioning. MobileSafari stopped stretching after that.
Related
Scrolling is disabled on this webpage, however, when using an iPad in landscape, this problem occurs. There is no gray space at the bottom until you try to scroll down (this is disabled) but all of the sudden the gray space appears. I've tried to find the answer everywhere with no success. The link to the page is www.papiasxm.com
body {
position: relative;
}
seems to be fixing the issue.
For responsive design, using padding/margin sometime causes the issue of overlapping the main design. For this type of problem, it is good practice to not to use fixed height or if you need to use it then fix it with margin/padding.
you can fix body position to relative. here, position: relative;
positioned relative to its normal position.
I am having a problem with my positioning. All of the items in my website are absolute positioned. They look completely fine when my web-brower is at it's full size, but when I shorten the (safari) browser then some items in my website move over others. At first I thought the problem was that absolute positioning does that automatically, but when I looked into it further I found some of my items that were in absolute positioning stayed at the same place even when my web page got smaller. It looks extremely bad and i would really appreciate help with my problem. How do I get things on my website to stay in the same place even when the web-browser shrinks.
#imagerotator
{
position:absolute;
right:118px;
top:65px;
}
I'm trying to create a parallax website. But then I have an issue with fixed positioning.
I have several sections , each with a background-attachment:fixed.
A position:fixed menu bar on the top with an hidden element in it on top of all sections.
A google map 100% with in one of the sections.
Now, the problem is when I scroll the page with animation in google chrome, the scrolling does not go smooth and it flashes several times while scrolling.
I do the scrolling with greensock scrollTo plugin , but that is not the problem as I also tested it with jquery .animate() method. Same result.
I did a research , and found out that chrome has a bug or problem with Fixed positioning ( and sometimes when you put hidden element in it )
Some pages suggested to use these two with the fixed elements :
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
I added this to the fixed menu and some of the choppy behavior of it reduced , but still not smooth.
If I add this to the sections with background-attachment:fixed elements, the scrolling animation goes smooth but does not act as fixed anymore.
Somebodies says that chrome has problem with large images, some says it has issue with fixed position and somebodies had a solution that did not work for me :D
I uploaded the page :
http://www.FarzanMohajerani.com/test/parallax
just click anywhere on the page to scroll.
I also created a jsFiddle with the exact same code. But I don't know why it doesn't have the problem in jsFiddle :
http://jsfiddle.net/Farzanmc/cRqxT/5/
It would be great if anyone could direct me to the right solution or remind me if I'm doing anything wrong.
Thanks
This solved the issue for me:
-webkit-transform: translate3d(0,0,0);
Adding this rule turns the element into a layer in Chrome, which avoids repainting. In my unique situation the error was caused by browser re-painting.
I', having the same problem with Chrome at the moment and I narrowed down the cause to the following combination:
1) background: fixed;
2) transform: (any transform, even just putting scale(1), would instantly break it).
As long as an element that contains fixed background image doesn't have any "transform" on it, it works fine. But as soon as you even add "transform: scale(1);" which doesn't actually make any real transformation, it completely breaks the fixed background image. You can start scrolling, but it disappears. If it was outside of the screen, it will never appear at all, no matter how far you scroll.
So essentially, the problem is that Chrome at the moment can't handle fixed background images in transformed elements. No matter which level of descendent or ancestor we are talking about.
The thing is, this is pretty much an essential stuff that and I'm really hoping that it gets fixed as soon as possible, because it's extremely limiting. You can't disregard Chrome as if it's IE6.
And you can't apply "position: fixed;" on an "img" element, because it will be fixed to the first "transformed" ancestor, not to the real screen, since that's apparently how it's supposed to be treated, according to W3C. Although, some new value would be welcomed, some that can break all the way to the very window, and fixit to those coordinates.
I ran i to a same problem and fixed it this way:
I had to deal with fixed header on a website and anytime i would scroll with a mouse wheel the header would get choppy.... I had a display:none element in a header and as soon as i removed the element, header became fixed and steady, now it displays well no matter how fast i scroll.
I found a strange bug in Firefox. I've tested it in Chrome too, but didn't happened..
I'm using a background object. It's a div with fixed position and 1920*1050 sized. I need this, because I want my site compatible with every resolutions. Smaller resolution hide the big part of the background, but full HD users can see the whole background.
If I use absolute position for this div, my browser give me horizontal scrolling ability. I can hide it with hidden overflow, but I can't disable the scrolling ability. With fixed position the browsers doesn't "see" the whole object, and it's equal to disabled horizontal scrolling.
If anybody have any other solutions I would be very grateful for it.
The problem with this solution, is this:
You can see the difference between the two. It's the same text styling, but no anti-aliasing on fixed one. With smaller font-size it's really annoying.
Anybody met this bug in the past? How could I fix it, or any other solution for background image?
Update
Okay, I deleted the div, and added background for my body tag, with fixed attribute, and happens the same...
background-attachment: fixed; < Causes the same problem
Not quite sure what your background is supposed to be doing. But if you need a proportionally scaling background that fits all browser window sizes, you can use thisplugin and a reasonably high resolution JPG with preload on.
Remove any box-shadow property from the parent element. This worked for me.
My page is displaying properly on desktop browsers, but not on mobile devices. The url is [removed after question solved]. The logo in the top left is absolutely positioned. The divs underneath the header are also absolutely positioned with left: 0. Currently div#page has position:relative, but I've tried putting the relative positioning on many wrapper divs with no success. I also have php output buffers in each individual php file (e.g. header.php, body.php).
The slideshow uses a WordPress plugin that calls the jQuery Cycle plugin, and also declares absolute and relative positioning, so it may be causing confusion as to what is relative and what is absolute. But I've tried attaching relative and absolute positioning to elements in seemingly every combination and still have had no luck.
p.s. I know the CSS is a mess, I plan on going through and refactoring after I figure out this positioning issue.
Looks like you have a media query in there that is adding the following css at a certain break point that would be affecting the mobile size.
#main #content {
margin: 0 7.6%;
width: auto;
}
If you could clarify exactly what you feel is wrong with the mobile version it would help us give a better answer. Are you looking for the description text to bump under the slider images?