I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last
Related
Using Bootstrap 4.3.1
On my site, modals work perfectly, in responsive mode too.
I also have an Android app, that among other functions, contains my site in WebView. When I trigger a modal within WebView in the App, on a long page - it opens at the top of the page (not vertically centered) and if you happen to be half scrolled down the page, you will not see it, as the position is fixed to the top, and you now need to scroll UP to see it (if you even know it opened).
Again, in a log web-page, in mobile form - the issue does not exist - only in WebView.
Has anyone run into this?
This is Bootstrap's position for the modal.
.modal {
position: fixed;
top: 0;
right: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
It seems that in WebView, the position: fixed; is ignored - as it's relative to the window, so if it scrolls down, the modals goes up with the page.
Tests for this are tricky, as to test properly, you need to test within an app, within a WebView Container (as I mentioned, in Chrome responsive on mobile, this issue does not exist).
Check this below styles are overwriting from some other styles,
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
looks like a style rendering issue,
I hope it will work for you.
Put it in html javascript tag.
$('#here_put_modal_id').on('shown.bs.modal', function (e) {
// here are code
document.documentElement.scrollTop = 0
})
I want to post an update and close this question with an update for anyone who runs into this issue in the future.
It turned out that there was a bug in the app, and the "pull to refresh" module was interfering with the location of the popups. As soon as that was fixed, the modal opened in its correct position, based on the bootstrap existing code.
Thanks to all those who tried to help.
.edit-wrap
z-index 999
position fixed
left 0
right 0
top 0
bottom 0
overflow hidden
background rgba(0, 0, 0, 0.6)
display flex
.edit-container
background #d1cdb7
padding 1em 2em 1em 2em
margin auto
This stylus demo works on my webview
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.
I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.
I'm developing a personal website, and I'm having some issues with Chrome on Android.
I have a background image covering up all the page, and it works fine in every browser I own (Chrome, Opera, Safari, Firefox) and on every mobile browser I own (Chrome on iOS, Safari on iOS, even default Android browser).
Here's the CSS for my body:
body {
width: 100%;
height: 100%;
background: url(../images/background.jpg) no-repeat center center fixed;
background-size: cover;
}
What happens on Chrome for Android is that the background covers only the available viewport (above the fold), while disappearing below the fold.
Here's a screenshot:
Could it be a problem with using body instead of the more classic wrapper #container div? I would really like to resolve this without having to clutter my markup; I'm confident it's something possible since it works in really most browsers.
Maybe it's a Chrome for Android bug?
As suggested in the comments, the problem was explicitly setting height: 100% on the body, which made it stick to the viewport height.
By removing that constraint, now the background extends to all the content.
Switching to min-height: 100% for body and html should give you the same affect.
Otherwise could you provide an example URL or code example of jsbin.com
I'm creating webview application in android using jquery mobile framework.
I need to show table that has width more than screen.
The horizontal scrollbar is not showing.
I have tried many ways but none worked for me.. (a lot of people facing the same problem with me, i have tried all of google search result link in page 1 to 3, some link from stackoverflow too)
Any suggestion?
*sorry for my bad english..
I had a very similar problem, and I found a workaround (bug-fix?) for my situation via some experimentation.
In the JQuery Mobile CSS file ("jquery.mobile-1.1.0-rc.2.css" for me), I changed line 1119 from:
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
to:
.ui-content { border-width: 0; overflow: visible; overflow-x: scroll; padding: 15px; }
This allowed my CSS (with absolute widths and coordinates) to be scrollable horizontally.
Once you modify your local copy of the JQuery Mobile CSS, don't forget to change the link in your html header.
Again, I'm not sure if the previous behavior was intentional or not. It may very well be inline with the design goals of the Jquery Mobile team. But this change worked for me. Hope it helps.
I suspect this is a bug that I found in this forum.
http://forum.jquery.com/topic/horizontal-scroll-views
But here they talk about some other alternative for this called swipe by which you can achive this
There are already some talk about this in site itself and you can refer it.
Swipe among activities in android