Cordova Slack Digest

Fri, 16 Oct 2020 08:30:53 GMT

User count: 4173

Join the conversation at slack.cordova.io

Channel #general (26 messages)

Thu, 15 Oct 2020 19:10:11 GMT

@marshall says

Hey everyone. I‘m not exactly sure how to describe the issue I’m having. We‘re using a React/Cordova hybrid for our app. Recently, and I haven’t been able pinpoint when yet, we started having an issue where tapping back to go to a previous view would take you to the appropriate route, but entire sections of the app would be cut off. I've attached a screenshot for reference.

Immediately upon scrolling, even 1px, the rest of the screen appears and operates normally. This issue does not occur in development in the browser, so it has something to do with when it‘s rendered on the device. I’m wondering if it‘s related to the new cordova-ios package or maybe WKWebView? I’ve googled this exhaustively and can't find anything. Anyone have any ideas?

Thu, 15 Oct 2020 19:10:52 GMT

@marshall says

Sometimes it‘s on a horizontally scrollable list, sometimes it’s on a vertical scrolling view.

Thu, 15 Oct 2020 19:11:04 GMT

@dpogue says

oh! That is a WKWebView bug, it happens in my app as well, but I've never had time to try to put together a reproducible test case

Thu, 15 Oct 2020 19:11:26 GMT

@dpogue says

My first suggestion is to turn off any filter/webkit-filter in CSS and maybe also turn off box-shadow

Thu, 15 Oct 2020 19:12:18 GMT

@marshall says

We don't have a filter applied, but obviously those cards have a shadow

Thu, 15 Oct 2020 19:12:50 GMT

@marshall says

Do you know if there's an open bug with WKWebView, and if so, maybe a link to it?

Thu, 15 Oct 2020 19:13:01 GMT

@marshall says

@dpogue Thanks for your help, btw!

Thu, 15 Oct 2020 19:13:29 GMT

@dpogue says

I haven't filed a bug yet because I have no test case for it

Thu, 15 Oct 2020 19:15:55 GMT

@marshall says

Got it. Not sure if it helps with that or not, but we‘ve noticed that preventing scrollTop = 0 works on SOME views. In our case, if a user goes to a view, scrolls, and then goes back to the previous view, there’s no issue. But if you go to a view, and then go back in history without scrolling we can reproduce it almost every time.

Thu, 15 Oct 2020 19:16:48 GMT

@dpogue says

oh, our fix was terrible... we basically did setTimeout(() => window.scrollTo(0, 1), 100)

Thu, 15 Oct 2020 19:17:40 GMT

@marshall says

I just wrote a small hook to do basically the same thing. 😂

import { scrollDown1Px } from '../utils';

const useScroll1Px = () => {
  useEffect(() => {
    window.scrollY = 1;
    window.addEventListener('scroll', scrollDown1Px, true);

    return () => window.removeEventListener('scroll', scrollDown1Px, true);
  }, []);
};

export default useScroll1Px;```

Thu, 15 Oct 2020 19:17:45 GMT

@marshall says

  if (window.scrollY === 0) {
    window.scroll(0, 1);
  }
};```

Thu, 15 Oct 2020 19:19:00 GMT

@marshall says

It's redundant and hacky, but it seemed to work. So I uploaded a new build to TestFlight and the problem actually got worse. 🤦

Thu, 15 Oct 2020 19:19:39 GMT

@dpogue says

ahh 😕

Thu, 15 Oct 2020 19:29:12 GMT

@marshall says

@dpogue Did taking the box-shadows out work for you guys?

Thu, 15 Oct 2020 19:29:41 GMT

@marshall says

We have a large project and box-shadows all over

Thu, 15 Oct 2020 19:29:55 GMT

@marshall says

We‘ll give it a shot, but I’d rather not pull them all out if it doesn't really help

Thu, 15 Oct 2020 19:29:57 GMT

@dpogue says

I don‘t think box-shadow ended up making a difference, we’d been using filter: drop-shadow and that was definitely causing lots of weird rendering glitches

Thu, 15 Oct 2020 19:31:17 GMT

@dpogue says

It‘s just so hard because it’s not 100% reliably reproducible even in the app, and then you need to try to build a reduced test case without all the rest of your app logic, but including all of your app styles, and any change to anything might end up being the culprit

Thu, 15 Oct 2020 19:31:33 GMT

@dpogue says

But WebKit basically won't even look at it without some sort of test case that reliably reproduces it 😞

Thu, 15 Oct 2020 19:34:43 GMT

@marshall says

@dpogue Do you guys use -webkit-transform: translateZ(0) anywhere

Thu, 15 Oct 2020 19:34:57 GMT

@dpogue says

I don't think so

Thu, 15 Oct 2020 19:35:11 GMT

@marshall says

Apparently that's helped some people who have had this issue.

Thu, 15 Oct 2020 21:59:48 GMT

@norman137 says

I‘ve had my share of weird browser bugs but I don’t think I've seen that one specifically. I also use react web in combination with corodva in my apps.

If using the web inspector and modifying any style (even like a background color) corrects the issue, then it kinda proves it‘s a browser bug, where the problem is correcting itself on another repaint (or relayout depending on what css value you changed). In my experience, it’s always caused by some combination of CSS/html structure that is very obscure and hard to pinpoint.

My favourite one that occurred recently on my web portal is a problem where IE11 was painting the parent node on top of it‘s children when you make heavy use of nested flex boxes... and you can correct the behaviour by attaching a z-index: 0; to the parent node. But you can’t just select the parent node using any css-selector to add the z-index... the z-index: 0; property must be within the same CSS block as where you set display: flex;

Thu, 15 Oct 2020 22:00:58 GMT

@dpogue says

Yeah, it‘s 100% a browser rendering bug. WebKit doesn’t realize it has to repaint a tile, or thinks the tile is occluded, or something like that. Hence scrolling 1px fixes it

Thu, 15 Oct 2020 22:01:31 GMT

@dpogue says

I meant to dig into it with a custom WebKit build where I can enable debugging output for rendering stuff, but it‘s not been high on the priority list and it’s a bit daunting

Channel #cordova-android (4 messages)

Thu, 15 Oct 2020 10:15:32 GMT

@kkubicki2 says

Found it! The https://www.npmjs.com/package/cordova-plugin-androidx-adapter|cordova-plugin-androidx-adapter plugin can be used to migrate the legacy references to the new AndroidX references.

Thu, 15 Oct 2020 17:03:03 GMT

@jose2013 says

I have upgraded to cordova-cli 10 and cordova-android 9 and started getting this error: > failed to load SourceMap: Could not load content for http://localhost/lib/angular-messages/angular-messages.min.js.map: Connection error: net::ERR_CONNECTION_REFUSED

Thu, 15 Oct 2020 17:07:38 GMT

@norman137 says

Does the <cordova-project>/www/lib/angular-messages/angular-messages.min.js.map exists?

Thu, 15 Oct 2020 20:29:06 GMT

@joel says

Anyone fielding reports of visual issues with the latest Chrome WebView, 86.0.4240.99? We're seeing flickering on scroll.

Channel #hangouts (13 messages)

Thu, 15 Oct 2020 14:59:21 GMT

@dpogue says

3 things to quickly bring up for background context, but probably not needing too much discussion:

Thu, 15 Oct 2020 15:00:07 GMT

@raphinesse says

Where's the meeting gonna happen?

Thu, 15 Oct 2020 15:01:35 GMT

@purplecabbage says

https://zoom.us/j/95038305327?pwd=U1J6djc3ek1yUThlRlZVYlBzclY5dz09

Thu, 15 Oct 2020 15:05:33 GMT

@erisu says

Maybe also add to the list about Android SDK supported version… For example compiled SDK, Target SDK, and for Non-Google Play Distribution.

Thu, 15 Oct 2020 15:06:01 GMT

@jcesarmobile says

We said next major was going to use android x anyway, right?

Thu, 15 Oct 2020 15:42:44 GMT

@niklasmerz says

Good timing 😄

Thu, 15 Oct 2020 15:42:52 GMT

@norman137 says

“Before it cuts us off”

cut

Thu, 15 Oct 2020 15:42:57 GMT

@erisu says

😄 right after the word “cut” 😄

Thu, 15 Oct 2020 15:43:33 GMT

@purplecabbage says

https://zoom.us/j/99781565035?pwd=QWF0dHg3NU14UHJGQjYzd3N2WFp5Zz09

Thu, 15 Oct 2020 15:57:01 GMT

@purplecabbage says

I gave mailto:apachecordovabot@gmail.com|apachecordovabot@gmail.com owner status to the youtube channel if anyone else needs to upload a video

Thu, 15 Oct 2020 16:00:53 GMT

@erisu says

> After you update your app to target Android 11, the system ignores the requestLegacyExternalStorage flag. @dpogue @norman137 I think this is the reason for SDK 30 issues which was discussed in Hangout

Thu, 15 Oct 2020 16:01:16 GMT

@norman137 says

Yup

Thu, 15 Oct 2020 16:04:17 GMT

@norman137 says

I read API 29 is a bit screwy because it was actually released early to add support for covid-related features. So there API behaviour changes but with flags to revert that behaviour back to API 28 behaviour, but still provides features for covid tracking apps. Those temporary flags like the requestLegacyExternalStorage is going away in API 30.