popover attribute may not be web compatible

[nt1m]

We just received a bug report that https://lrn.com/ is applying the popover attribute on some elements on their training pages which causes them to disappear on engines that implement the popover attribute and prevents from moving forward in the training process.

@mfreed7 @josepharhar @miketaylr Does Chrome have some use counters to measure potential breakage in the wild? I'm curious if Chrome has a plan to mitigate for such breakage.

[nt1m]

(An avenue that's always possible for WebKit is to quirk specific sites to disable the popover attribute UA styles, but it's not ideal)

[nt1m]

cc @ziransun @asurkov @cathiechen @emilio who are involved in the Gecko implementation for awareness.

[nt1m]

(fwiw I don't have a direct link to the page that's broken since you need company logins to access it, but the gist of it is that it's broken because elements with the popover attribute now have display: none by default).

[miketaylr]

Heya @nt1m - we do have use counters at https://chromestatus.com/metrics/feature/popularity#PopoverTypeAuto (and see the two below it. Usage is basically zero... but maybe the UseCounters are only active for folks with chrome://flags/#enable-experimental-web-platform-features on? (I dunno, maybe @mfreed7 or @josepharhar would know).

I'm happy to attempt outreach, but would need more details about the report - feel free to shoot me an email if that would be helpful.

[mfreed7]

Thanks for raising this! I've had popover enabled at 50% of Canary/Dev/Beta versions of Chrome for the last 3-4+ months, to suss these out. There was one other issue like this, and after some quick outreach, the site fixed their bug. Other than that, I haven't seen any other bugs, so I'm fairly confident this is a low frequency issue.

To be very clear, this is a site bug. Custom attributes must start with data- to avoid clashes with platform features like this. An easy recommended fix for the site is to just rename popover to data-popover.

Does anyone have a good contact at the broken site? I'm happy to try to reach out to help them.

[nt1m]

Thanks for the insight! I'm currently attempting outreach to get this site fixed, will keep you updated when I get more info.

[mfreed7]

Thanks for the insight! I'm currently attempting outreach to get this site fixed, will keep you updated when I get more info.

Awesome, thanks! LMK if you need any help.

[nt1m]

Small update here: outreach is still in progress. Seems like the framework that was used on the site was an older version of Angular UI Bootstrap: https://angular-ui.github.io/bootstrap/ (from @karlcow's analysis), which used the popover attribute.

[nt1m]

Fwiw, we've had a second report from a mobile app using the ionic framework which incorrectly uses the popover attribute: https://ionicframework.com/docs/api/popover

[mfreed7]

Fwiw, we've had a second report from a mobile app using the ionic framework which incorrectly uses the popover attribute: https://ionicframework.com/docs/api/popover

Thanks for the heads up. Is there a bug filed against ionic for this already?

[nt1m]

It does look like this was fixed in ionic-team/ionic-framework#26672, though some websites/apps might still use the older version of the framework.

[nt1m]

We found out that sites using older versions of this framework are affected: valor-software/ngx-bootstrap#6544

[Totati]

I've found another one: AlaskaAirlines/auro-popover#42

[mfreed7]

I've found another one: AlaskaAirlines/auro-popover#42

Thanks! I just commented there. Hopefully they can fix it soon.

[nt1m]

We found out that sites using older versions of this framework are affected: valor-software/ngx-bootstrap#6544

Correction: no fix was ever done in the framework itself, but framework consumers are encouraged to move from popover= to [popover]= to avoid the clash.

[mfreed7]

I think we can close this issue. Chrome shipped Popover in M114, and while there were a few issues (including the ones mentioned above), they were all resolved on the site side by avoiding non-data--prefixed attributes.