White space when overflow on iOS browser - javascript

I'm quite new to HTML and CSS. I'm currently developing a web page for mobile. and I'm facing an issue is when I drag on the page that is not scrollable, there is white space coming down from the top, on iOS safari or chrome browser.
I have set my page CSS as follow:
.app-view{
white-space: nowrap;
top: 0px;
overflow-y: hidden!important;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
This white space only appears on iOS but not Android. Does anyone know how?
UPDATE:
I've got the answer, i'm using framework7, and there is another layer hiding underneath, when i change that layer to become position:fixed. The problem would go away

maybe there are some not expected margins or paddings in block that contains your .app-view, its hard to answer without your markup and other css

Related

Position fixed elements jump around when loading or redirecting iframe (iPad only)

To see the problem clearly. Please take a look on the following YouTube video.
Position fixed elements jump around when redirecting iframe
or try the widget on this site (iPad)
Naiise
Note: The site in video is different from the site above since the
owner doesn't wanna use the widget anymore before the problem is
fixed. But they are having the same problem.
One more thing: All fixed elements on the parent site jump around not only the iFrame. It likes, on iPad, the fixed elements need to be recalculated position when redirecting pages inside an iFrame.
Here is a simple code that I created to simulate the issue. Please create a html file from it and run it on iPad simulator or real device to see the problem.
<html>
<body style="height: 10000px">
<div style="color: #ffffff; width: 200px; height: 100px; background: red; position: fixed; left: 20px; bottom:300px;">
Other fixed element
</div>
<iframe style="height: 500px; width: 420px; position: fixed; bottom: 95px; right: 20px;" src="https://printskitchen.eber.co" />
</body>
</html>
The problem is caused by the translate3d transformation that you apply on the iframe;
-webkit-transform: translate3d(0, 0, 0);
There is a well known problem in which translate3d causes position:fixed elements to behave like position:absolute in certain webkit browsers, such as those on iOS, as well as certain desktop versions of chrome.
Here is a demo which demonstrates the bug in action:
html,
body {
width:100%;
height:100%;
margin:0;
padding:0;
transform: translate3d(0, 0, 0);
}
#nav{
width:100%;
height:10%;
position:fixed;
top:0;
left:0;
background-color:red;
}
#content {
width:100%;
height:500%;
}
<!DOCTYPE html>
<html>
<body>
<nav id="nav">
</nav>
<main id="content">
</main>
</body>
</html>
In the demo, the red nav should be visible even after scrolling down. Depending on your browser, this may or may not work properly as is. Removing the problematic -webkit-transform: translate3d(0, 0, 0); style makes it work properly across all browsers.
This bug occurs due to the transform creating a new coordinate system, causing the position:fixed element to become affixed to the transformed element instead of the viewport.
I myself came across this bug while trying to smooth out transitions on iOS, and created a post about it here. More information can be found on this thread which I have also linked to in my own post.
The only surefire fix I know of is to remove the problematic translate3d style. If it is necessary, for example in order to coax iOS into enabling hardware acceleration (which is what I needed it for), then try applying it to different elements, either parents (body, html), or children of the iframe holder. I found that applying it to a completely unrelated element gave me the desired result.
There are also several case-specific workarounds and fixes in the thread I have linked to. One of those might do the trick.
It is a pretty nasty bug to track down. Took me a while to find it on my own page.
Best of luck.
I figured out that if you change the position from fixed to absolute it'll work perfectly.
You can follow the following tutorial to emulate the fixed position by abosolute position
https://gabrieleromanato.name/jquery-emulate-css-fixed-positioning-on-mobile-browsers
Try to avoid changing height and display property (you should remove opacity as well). Instead, give #iframe-holder will-change: transform; and try to:
transform: translateX(150%); when widget should be collapsed.
It should not cause widget to render again (the problem might be rendering issue), and you will benefit in performance.

Google AMP amp-sidebar & fixed positioned z-index

I have a header with position:fixed and I'm trying to implement amp-sidebar component.
AMP is creating the -amp-fixedLayer adding style="top: calc(0px); pointer-events: initial; z-index: 10000;"
to fix scrolling performance in Safari ("[FixedLayer]" "In order to improve scrolling performance in Safari, we now move the element to a fixed positioning layer:" )
The problem is that since amp-sidebar component has a z-index:9999!important in their styles, the fixedLayer is displayed in top of the sidebar.
I thought about wrapping amp-sidebar and then I could add the z-index I want, but the parent tag for an amp-sidebar can only be 'body'
Any ideas how to fix this?
I just had the same issue and after fiddling a bit I found a way to edit the Z-index of my header.
Amp puts what z-index it thinks is needed but you can tweak those values. For instance:
header {
position: fixed;
z-index: -2000;
width: 100%;
background-color: black;
opacity: 0.7;
color: white;
}
This is the CSS code of my header, the trick here is to use a negative z-index. Amp will take its default value, add the z-index from the style (negative in this case) and put the result in the CSS.
So in my case the calculated z-index of the header is less than the sidebar's and therefore the sidebar gets on top of the header.
Hope this helps.
Fairly limited options
Considering that a portion of the intent behind amp is to push developers toward a UI standard (where the sidebar should always take the entire height of the window), you'll have to lightly break it.
note: Apparently jQuery is not an option.
Use margin on the sidebar
amp-sidebar {
margin-top: 10em;
margin-left: 5vw;
}
Ultimately, submit a bug report here:
https://github.com/ampproject/amp-by-example/issues/new
Roll your own amp
Submit a bug
Fork the github repo.
Patch the bug by setting the sidebar z-index higher.
Use your patched repo.
Submit a pull request to the master amp repo (fixes bug you reported).
That's really the right way to handle these scenarios.

CSS Blur trouble with IE 11 - workaround?

I am writing a responsive web page using a blur filter to full screen blur an image. It is a big image and I use it as background. The point is, I use it as background as a CSS background.
E.g. I don't use
<img src etc.
I use the css property background. This gives me the advantage of using background-size for the responsive layouts. E.g. cutting off edges for mobile devices, and automatic shrinking, depending on landscape and portrait too.
This would be a lot of work, to do by hand.
Problem is, sadly, IE. Internet explorer 11 does not offer a way to use css blurring.
EDIT as mentioned in the comments, I could just blur the image myself in photoshop and am done.
The problem is, for lower resolutions I need different blur levels. If the screen size is 600x400 I cannot use the same blur that I was using for 1920x1200. So I have to blur ALL background images I have for ALL resolutions I am using. Then implement a loading Technic to only load the images that are needed. There are many background images. Around 50 total. New ones should be able to be added by the customer as well. I really don't see me making him do this process.
I read about:
StackBlur
But I can't seem to get it working.
What I tried in a codepen so far
HTML
<canvas id="canv" ></canvas>
CSS
canvas {
width: 100px;
height: 100px;
border: 10px #c0272b outset;
box-shadow: 0px 0px 12px 2px #333;
cursor: default !important;
background: url('data:image/jpeg;base64,...') center center no-repeat;
}
JS
stackBlurCanvasRGB( "canv", 0, 0, 100, 100, 5 );
as a reference the codepen i stole the image from

Very strange issue in IE9 with entire page jumping

EDIT: The client wants to do some testing with disabling the click and drag feature in IE, so at this current moment you will be unable to replicate the bug. I understand if this effects the communities ability to assist in fixing the ultimate underlying problem.
So here is the problem. It occurs in IE9 and IE8 when the screen height or more specifically the browser height is less than the height of the website main container. The website scrolls horizontally so its total height is somewhere around 700 or 800 pixels.
To reproduce this bug you have to open up this url: http://dev.gregoryfca.com/ in IE9 and make the height of the browser somewhere around 500 or 600 pixels. So this will force the page to start scrolling vertically top to bottom.
Keep it all the way to the top so you can still see the G logo and the menu as well as the social icons. Then click in the white area and dont let go. You can click in the white area next to the Our People section.
When you click start to drag your mouse to the right. This will start the page scrolling and allow you to use the horizontal scroll feature.
So here is the bug. In IE9 when the browser height is smaller than the total website height, when you click and drag in the middle section to scroll horizontally, the whole page jumps down vertically so that the absolute top of the screen is the top of the #drag-wrapper element.
I dont want the page to jump when you are scrolling horizontally. If you put together this same set of circumstances in Chrome or Firefox you will see this bug is not present there.
I think it has something to do with the way IE treats focused elements with certain positioning, or something like that. The site uses lots of jQuery as you will see.
Does anybody have any idea. I have basically exhausted everything I can think of.
try giving left and top property to this css class:
#drag-wrapper {
height: 610px;
margin: 35px 0;
overflow: hidden;
padding: 0;
position: absolute;
left:0;
top:150px;
width: 100%;
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
z-index: 4000;
}
As you can see this class has position:absolute but it doesn't have the left and top property. make margins to 0 if requires.

Scroll website with mouse wheel, not drag to scroll

I've built this website based off a template where you drag to scroll through the photos but due to a change of requirements I need to change it so you just scroll a mouse wheel to scroll like normal website do.
Any idea from the code how this is done?
Not even sure if it's wholly CSS or JS.
http://www.replyonline.co.uk/DirectionGroup/xmas/index.php
Thanks,
Tim
It's using JavaScript - specifically jQuery Kinetic by the looks of it.
If you turn off JavaScript (or remove the script from the page), it scrolls like a 'normal' page.
EDIT :
Outside of the Kinetic plugin (didn't look where), the script is changing the overflow CSS to hidden; this needs to remain as scroll, as per the inital state of the page sans JavaScript.
.ib-main-wrapper {
bottom: 24px;
left: 18px;
overflow: scroll;
position: absolute;
top: -98px;
margin-top: 115px;
outline: medium none;
width: 100%;
}
sounds like you question is based on this
Remove HTML scrollbars but allow mousewheel scrolling
which points to this
How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?

Categories

Resources