Gray edges appear when swiping page in Blackberry Jquery Mobile+Phonegap app - css

I am developing a Blackberry and Android app using PhoneGap and Jquery mobile together. I don't have any problems with the android version but with Blackberry I'm getting a strange behavior that I don't want to get...
When I scroll/swipe up or down the page moves to that direction as if it were a scroll-able page but IT IS NOT and this creates an "elastic bouncing effect" making appear gray edges up and down of the page ...
I suppose this issue has to do with some CSS bug problem but I haven't been able to figure it out...
Here you have some pictures that help to understand better my problem...
Image 1
Image 2
I hope you can help me... Sorry for my bad English btw...

Related

CSS bugs in Safari browser

To begin with, I just started my first job as a junior front-end developer and got a task to fix bugs in the safari browser. (Chrome works well). 
Our web app is developed using TypeScript, React (with Material UI framework) and Webpack.
Unfortunately, I spent hours surfing the internet and trying to find a solution for these bugs, but I couldn’t. I feel these bugs come from Material UI, but I might be wrong. I hope someone can help me with that and thank you in advance! 

So the main problems I encountered in Safari were kind of CSS bugs.
 Take a look:
Chrome_View / Chrome_View_Wrapped
Safari_View / Safari_View_Wrapped (Bugs are marked)
As you can see the in Chrome everything looks okay, while in Safari some of the things get corrupted.
ToolBar items get wrapped even there is free space. You can take a look at html and CSS. For example, if I comment (margin: -16px;) last item gets to its place.
Blue drawer background is not displayed until you wrap it out. You can take a look at html and CSS. For example, if I comment (overflow-x: hidden;) it gets fixed.
Wrap button on click should transform its direction by 180 degrees.
Footer and Drawer do not display images.
If anyone is familiar with this kind of issues please share your experience.
P.s. It would be great to avoid putting everywhere prefixes manually.

bootstrap 4 login template isn't responsive. can you see why?

I am in-the-making of a nice login page, mobile first design, using Bootstrap 4.
Used this snippet, and was very happy about it!
However, I found out it isn't mobile responsive. only when I disable the touch simulation on Firefox developer tools, it becomes normal size.
Thanks for your help :)

ios Mobile checkbox border bug

I have a custom checkbox and a weird border appears around my checkbox SVGs. On the website web app, tablet, and Andriod devices it doesn't appear. Only on IOS, Has anyone come across this before and know of a fix. I have spend days looking for a fix, doing CSS hacks, googling and working with other dev's on the team and trying to find a way to inspect on mobile, but to my knowledge, not a possible thing to do on a mobile browser. Attached is the image.

Fixing a webpage so it's non–scrollable. Specifically for mobile devices

I've just finished a website which is layering a webpage over an iframe. Everything is working fine on an Internet browser, yet on mobile when trying to scroll the background (the iframe, the content) it only scrolls the frontal fixed web icons. Is there anyway around this?
Specifically I thought if I could implement a non scrolling function on the front page it then scroll appropriately on the back page.
Does this sound like a feasible solution. If so could anyone assist in how to implement this?
thanks

Can't click on links hovering above video in safari

So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.

Resources