I am seeing a strange issue on mobile chrome only. If you go to https://guestbell.com/ (I have also seen this on other pages) you will notice that only the first time (not after reload) there is extra padding on the top of the page. The moment you scroll (even by one pixel) the padding disappears. I believe it might have something to do with the disappearing address bar - the height of this extra padding seems to be pretty much the same as the address bar. But I still don't understand what is causing this and what fixes it. Any ideas?
This is what it looks like:
Before scroll:
After scroll:
Related
I have a situation where disabling scroll on mobile when my cart is turned on causes really weird graphical issue with android firefox toolbar. Cart is a fixed container taking an entire screen.
When toolbar is shown it just stays there and freezes (probably because i just turned off scrolling) but when its hidden and I'll turn on my cart white bar shows up in place of the toolbar picture related, as you can see it's obscuring my buttons as well. I found workaround for that where I make custom --vh unit based on actual screen height.
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
I disable scroll by ading this on body
overflow-y:hidden;
I was also trying to disable it with different tricks like setting position to fixed or relative but it causes the same bug.
This only happens on firefox android.
Is there a way I can turn off scrolling without causing this, or maybe someone knows how to fix displaying 100vh height on mobile with pure css?
For a while now, I'm facing a problem with height: 100% (or 100vh) on Chrome for Android.
Here, I have a page, and a blue div with height: 100vh. The yellow block has height: 50vh.
When I scroll down, the address bar goes away, which makes the viewport size change! So everything that was based on that, changes, too, as you can see here:
.
Everything increases 55px, which is the exact size of the address bar. This is so annoying.
I temporarily fixed it by height() on load, but it is jQuery, so it makes my website unnecessarily slow.
How do you deal with it?
Unfortunately, there's no satisfying way to deal with this today. The good news is that because of that, I've changed this behavior so that 100vh is static and the size of the viewport when the URL bar is hidden (matching Safari). See the Chrome Bug for details. This is currently in Canary channel and would ship in M50.
There's an unfortunate detail: height:100% refers to the viewport when the URL bar is shown but 100vh fills the viewport when the URL bar is hidden (See my explainer for more details)! I did this for compatibility with Safari but we're looking at ways to make this more rational so the M50 target may slip in preference of shipping something more sane.
In the mean time, if you can't wait and you want your page elements to remain statically sized, I'd recommend explicitly sizing a position: absolute box as your root based on window.innerHeight and using percentage based heights for the children. It's not ideal but hopefully will get better soon :)
UPDATE: This is shipping in Chrome M56 - you can currently try it out in Beta.
First, hello to everyone, I'm kinda new here, altough this site has helped me with lots of stuff.
Here's my problem, I've made images in 's with text behind them, so that when you hover with your pointer over it, the image slides to the side and you can read the text. Pretty simple. Now the problem that I'm having is that when I lower the screen size(eg view it on an Android), the responsive design kinda doesn't work for those images because there's some weird spacing to the left, even though the image can fit on that screen size.
Here's the site with the problem (I use it for learning purposes :)): This
your responsive works fine (bootstrap I guess). The problem is you have a fixed width in your .slide1, .slide2, .slide3 that is messing the 33.3333% width of your col-sm-4 . Basically you need to use mediaqueries to adapt your animation.
adding overflow:hidden to col-sm-4 will show you better what is happening, and adding to your slides max-width:100% may be the first steps to fix your web. Later your problem will be the image size
I'm creating a Dialog, setting a content view with two Buttons, and displaying it. Oddly enough, even though I properly centered it vertically and horizontally, on the Droid X extra blank space appears at the top and on the right side.
I discovered the top is reserved for the Dialog title; even when that title is blank, the space is kept empty. The workaround there is easy enough--I set a title.
The right side, however, baffles me. When I test the same app on other devices it works beautifully; the Droid X, however, keeps the right side of the screen empty. When the root layout of my Dialog's layout has a width of match_parent or fill_parent, it does not extend to that empty area. However, if I manually set a fixed large width, it does extend as far as it needs to--no more empty space on the right side. That's hardly an ideal solution though.
Does anyone know how to get around this Droid X layout quirk so Dialogs do not have that empty space on the right side?
After some experimenting, I found that if I change the margin and/or padding sizes, suddenly the Dialog becomes centered! For example: margins of 4dp creates an offset. But making the top, bottom, left, and right margins all larger and different makes the problem go away.
This sort of behavior generally means one of two things: There's a bug in how the layout is drawn, or I have a gross misunderstanding of how these things work. Both seem equally likely.
So my answer is: play with the margin (and padding) numbers. It's possible that you can find something that both works and is aesthetically pleasing.
Sorry, I know this answer sucks. So it goes.
My biggest annoyance with browsing websites on my Android browser is reading text with indented blockquotes. Android's webkit implementation (correctly, in my opinion) sets the width on any text element to the browser width.
However, this means that list and blockquote elements which have left margin or padding applied to them hang over the right edge of the visible screen. This makes for annoying reading experience, as the user has to be constantly scrolling right and left to read.
This behavior is visible in just about any site viewed on Android, and my feeling is that this constitutes a bug in the browser.
But my question is: does anyone have a good css solution to preventing this issue? I've tried wrapping all body text in a block-level element with max-width: 100%, but elements with left padding or margin still hang off the edge.
You should be able to fix that by setting the box model for the div/p/li etc.
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;