Managed to convert my website to PWA, everything works fine but a small issue with Install Banner pop-up.
The banner appear on the bottom, as it should, but disappears when user scroll page down, then comes back if he is again up the top of the page.
is there any way to fix it or is it a feature of banner?
This is the website:
https://clicktoplay.ru/
It is a feature of the banner. The mini-info bar will only be shown the first time a user visits the page, and won't be shown again for about 90 days.
If you'd like to add your own custom install experience, you can do that by listening for the beforeinstallprompt event, and showing a button or other custom install promo.
Related
Do any one knows how to make sure that extensions work in popup window as well.
I have my chrome browser[highlighted with RED rectangle box in the picture], I wanted to capture the full screen of popoup windows[which is below to chrome highlighted box]. Also to mention that popup page is very huge having big scroll in it [mentioned by blue arrow in the picture].
Its really important.
Right click the Google Chrome window on top and select open as tab, then the address bar opens with default options to the right and click the puzzle icon for your extensions :)
I have a html site which works well on any device which uses a mouse or scrollwheel. However when I test on mobile, my site scrolls smoothly for a certain amount of time, and pauses at the bottom of a section as if it has reached the bottom of the page.
After about half a second the site works as usual, but if I scroll back up the page the same issue occurs.
I have tried adding webkit-overflow-scrolling to all classes and most of the resolutions to this problem I find are based on this methodology. But It's not fixing things in my case.
If it helps, when I scroll to the point where the site pauses, chrome's (mobile) toolbar disappears as if I have reached the bottom of the page and swiped it away.
I'm working on a couple of ionic apps that are communicating with each other. In order to demo them I run them side by side on a webpage embedded in iframes.
When displaying that webpage in Chrome it works just fine. However when showing it in IE on a touchscreen I can't scroll vertically inside those iframes. I debugged it a little bit and it seems that touch events that have vertical movements just don't get passed into the ionic app, whereas horizontal swipes and taps get passed down just fine. It seems like the vertical scrolling of the entire webpage absorbs those events without passing them down.
Has anyone encountered an issue like this before and can tell me if there is a way to fix this?
Thanks #Captn_Hammer for pointing me in the right direction. The fix is similar on IE. All I had to do was add this to the body of the webpage:
style="-ms-touch-action: none;"
I'm working on a hybrid app using Cordova, Bootstrap and Angular JS (1.3.x) and testing it in a Chrome desktop browser and on a Android device (lollipop, 5.0.2).
In a particular view, I open a modal window using ngDialog. The content in this dialog can exceed the height of a typical smartphone size, so vertical scrolling is required. And here comes the problem:
Most of the elements that should be displayed at the bottom of the dialog (out of initial sight) do not appear or don't getting rendered. When I blindly tap on the area where the disappeared interactive elements should be, they will get painted. When I then scroll up again, elements at the top disappear.
This behavior didn't exist on Android 4.4.
Now I'm able to reproduce this error on my Windows Chrome Browser (v43).
These are the steps:
Run this Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
Test with a recent Chrome Version
Make sure, this plunker is shown in embedded view (important)
Open Chrome developer tools
Click "Toggle device mode" (smartphone icon) (important)
Limit the vertical resolution to about 600px in height Click "open dialog" and scroll down to the bottom
Can you read "Hello, do you see me?" ?
If not, press on one of the panels on top or below the textbox, this
will cause a repaint and you can see the text.
This is how it looks:
Not OK -> No text in marked red boxes:
OK -> After clicks on it or browser tab switch
I found this article on postman blog, but the "fixer" does not seem to work in my case.
http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
Can someone point me to the right direction?
I followed the instructions in the linked blogpost and those seem to work for me. Specifically, adding
-webkit-transform: translate3d(0,0,0);
to my CSS for ngDialog-content which has overflow-y: scroll.
Now the div scrolls on load for me.
The other good news is that at least my issue seems to be gone in Chrome Canary, so it may be worth seeing if the issue still exists for you there.
My website has a ajax interaction that brings up a full-bleed modal that is suppose to scroll scrolls.
go to www.morningharwood.com/works
Click on a project
go into a project
The Project modal will open up.
Unfortunately scrolling will no work on touch. To note the page scrolls just fine if you press and drag from the on the projects' hero image.
Does anyone know what would prevent scrolling on mobile touch?