I've been probably overthinking this and trying out too many things incorrectly..
http://testserver.glow-berlin.de/kurzfilmwettbewerb
this is the website we're talking about.
At the bottom (right above the footer) you find an image that is supposed to stick to the bottom of the pink box.
Whenever I check it on mobile, the image offsets outside of the box. I built the section using the grid system but struggled with it, so I removed it for mobile... I just couldn't figure out the problem. Now – without the grid system – the same problem appears. On Android it seems to work fine but on iOS the image jumps out of the box again. When I fix it for iOS the problem appears on Android.
Any help with this?
The background-attachment: fixed; style on your div with the ID #gutfilmer is the problem on iOS.
'background-attachment: fixed has been disabled on iOs since it costs a lot on mobile browsers.
If you remove it the filmflap stays on the pink background.
try
#gutfilmer {
overflow:hidden;
}
i am currently building a wordpress page and encountered to a problem:
when i zoom in, the title and text of the container under the slider (revolution slider) hides behind my slider. I think this problem could be solved with some lines of css. In the posted image you can see my problem.
https://imgur.com/OFDgaTC on 100% zoom
https://imgur.com/fUZyqIP on 110% zoom
Thank you.
It's hard to help without any code, but I can guess you have a fix top margin (px unit) or equivalent on your title tag. Instead use another size unit (%) for example.
Hope this helps. Can't do much without seeing any code.
I'm struggling with this website I made using webflow.io
It displays perfectly on desktop, but on mobile I get a white margin or padding on the right side that completely damages the site. I've tried to debug the code but can't find the culprit.
Any help would be appreciated.
The problem seems to be coming from the "Describe your app" section image sliding in from the right.
Adding overflow:hidden to the parent element should fix this or work on making the image absolute.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
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.