I am building a capacitor app that works well on android but on ios using 100vh for the page causes some scrolling issues. I found the solution on css tricks using height: -webkit-fill-available; but using that only works well the first time user opens the app.
When you kill then reopen the app, then it only takes about 97vh.
Update:
I found a better solution using javascript here
Related
I set -webkit-overflow-scrolling: touch in CSS,Then When I scroll the elements, it will randomly jam,I've tried everything I can find,But it didn't work.
I found that ios13 discarded the CSS -webkit-overflow-scrolling: auto
This happens when I use Vscode to set -webkit-overflow-scrolling:
How can I use that property?
They killed it off.
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
This doesn't explicitly say that killed 'auto' but all signs point to them having done so.
I'm having nightmare issues with a popup that has a scrollable div inside. If the user 'bounces' it and then scrolls in a particular way it'll scroll the window underneath and then you can't scroll the div until the window has finished scrolling.
So set 'position: fixed' or something like that (I hear you say). Well I have - in fact I'm using Angular material and the actual scrolling on the underlying window is blocked but iOS seems to still run its physics algorithm even though nothing is animating.
At least this option used to let the user get less 'bouncy' and hope they'd not trigger this 'bug'.
--
There's also a new option that might help with issues caused by auto no longer being available - such as weird scrolling of parent elements as described above. However unfortunately I couldn't get this working with Safari, but it did work in Chrome as expected. And even if this does work it won't help restore the auto behavior if you just prefer the way it works.
overscroll-behavior: contain;
I think this preference or suggetion is not yet updated with vscode.
you can surely give a try and verify on actual IOS 13 Device.
-webkit-overflow-scrolling: auto;
as i can see in just suggestion is showing strikethrough in vscode.
I'm aware there had been a fairly recent update that removed the video controller from Chrome and that this feature has been added back in the latest versions. However, I'm having an issue with Chrome removing the video controls from videos that are in div blocks that use overflow: auto; to scroll the content. I'm unable to find any documentation of this issue and I'm wondering if there is a possible workaround for this.
Using the example from the Onion's VAST plugin for Video.js, I switched out the VAST xml file for one of my own which has a flash video for the ad's video source. When I play this in Chrome, I see the video start to play for a split second, then it stops and goes black. The error is:
Video.js: currentTime unavailable on Flash playback technology element.
The weird thing is that this setup works perfectly in Safari 8 on OSX.
Any ideas on what's going on here?
Update: Found the source of the problem is coming from my not including the videoJS CSS. Once I put that back in, the flash video ad plays again. How can not including CSS break this? Again, not including this CSS only breaks the playback on Chrome.
The script is crashing when the video element is not absolutely positioned. I haven't dug deeply enough to figure out exactly what the dependency is, but I'm pretty sure it's to do with the updating of the text in the "Skip in 5...4..." button. In fact your "split second" is exactly a second - it plays until the countdown tries to advance, and then throws an exception.
If you include this style the video will play
.vjs-tech { position: absolute; top:30px }
(the top: 30px is just so the video doesn't cover the play button - it still works with just the position: absolute, but it's harder to find the button)
I am a long time silent member of SO. I have always found the answers I needed up to now, hence my very first post! I cannot seem to find a solution to this issue related to twitter bootstrap.
It's a very simple example of google maps integration with the fixed top navbar layout. Everything works as expected on a desktop browser. Whenever I resize the browser window bootstrap switches to mobile layout and the expand/collapse button shows up. That works well except for the fact that my map container breaks as bootstrap seems to add some padding around the map layer. I am a new member and it won't let me attach screenshots, but I hope you get and idea by checking the site URL below. Simpy shrink the browser window and you'll see what I am talking about.
I have tested it on Android emulator as well with same results.
Site URL
Any help would be appreciated! Thanks in advance.
you need to add this to your css
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
I saw that it was
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}
We've run into an optimization problem using WebKit on Mac OS X that we're hoping someone can help us with.
We've written a Cocoa app for Mac OS X that essentially manages a single WebView that points to our online web site. Everything is working fine for the most part. However our web site uses CSS's position:fixed to keep a thin "header bar" locked to the top of the WebView, similar to the big orange "Welcome" bar at the top of StackOverflow.com. We've determined that with position:fixed active, scrolling the WebView forces the entire web page to re-draw itself, which causes scrolling to be agonizingly slow. With position:fixed disabled, scrolling is very fast and fluid; only the page elements that are scrolled "into view" need to be drawn.
We know that this isn't a bug in our Cocoa app code, nor is it a problem with our HTML/CSS code. The same slow scrolling occurs using WebKit test code from Apple. We can point Apple's test code to http://www.StackOverflow.com as a test and we see the exact same behavior. There's also a test page in the Mozilla bug database that we've been using to test the problem (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). The odd thing is that some WebKit-based browsers on the Mac (eg, Safari and Chrome) don't have this problem; scrolling is always fast on pages using CSS's position:fixed with those two browsers.
Has anyone else experienced this problem with WebKit on OS X? If so, what can we do to speed up our scrolling? Thanks.
I might be way off here as I'm not sure if the same will apply in your web view, but using a style that forces the nav onto its own layer may help.
Something like translateZ(0), or translate3d(0,0,0,). I've come across similar issues when building with Phonegap and applying some thought to layering really helped out.
I believe the browser can utilise hardware acceleration where a third dimension is involved.
I was having a similar problem: the fixed bar was flickering when I was scrolling the page.
So I forced the WebView to use layers and I fixed
[w setWantsLayer:YES];
I had a similar issue in my webview based mac app. It has header and footer with position:fixed css property. Latest webkit shipped with 10.10.x and above don't suffer from this issue. It happens in webkit for mavericks (10.9.x). I got it working by setting these properties for the webview
[self.webView setWantsLayer:YES];
[self.webView setCanDrawSubviewsIntoLayer:YES];