Safari slides not fully rendering

[a.og...@entouch.co.jp]

tested with RC6, noticed this around RC3, probably bug has always existed.

Load an image heavy PDF as a presenter to the HTML5 client on strong WiFi. Have a participant join on an iOS device, (iPad or iPhone any generation) but with 4G or poor connectivity. To see the result clearly use a hotspot tethered connection from another mobile device.

Checking the safari remote debugger you can see the svg is fully loaded into the device and can be seen in network preview in the dev console, however on bbb the slide is only partially loaded.

As the moderator, move the mouse over the current slide starts to reveal pixels on the participants screen.

Its as though the foreignObject component is not rendering correctly and mouse over is causing it to re-render where the mouse travels.

[a.og...@entouch.co.jp]

 

[a.og...@entouch.co.jp]

Google groups doesn't like gifs so:

https://imagebin.ca/v/4IiPLEJuN5VQ

[Chad Pilkey]

Could you check what size the converted SVG is. We noticed an issue with the presentation conversion to SVG where it would end up creating very large files (>10MB). The phone browsers would struggle to render the big file (and also eat up a lot of bandwidth) so we've been working on improvements to the conversion to cut down the size and complexity.

You should be able to find the size of the file from the network tab in the developer tools of a desktop browser.

[a.og...@entouch.co.jp]

the largest slide (of a 40 ish slide document) after uploading a PDF uncompressed from the client was about 470kb

I know the svg is fully received on the iOS device, I also know that when I load the svg url directly (bigbluebutton/presentation/5e2ce9b8ee0... /svg/slide#) that they display fine in the browser.

I'm guessing at the render timing or layering of the svg on slow networks?

No issues on WiFi whatsoever.

[Chad Pilkey]

Interesting. So the size isn't the problem here. I found an issue in Github that seems to be the same thing, https://github.com/bigbluebutton/bigbluebutton/issues/5872. There's no pictures (or any useful information at all) unfortunately.

[a.og...@entouch.co.jp]

I am going to set aside some time tomorrow to try poke at this, where is the codebase is the svg path send to the foreignObject? 

I had a quick look at the codebase today and I could see that the HTML client is sending slide events to the backend but I couldn't see where the HMTL5 client gets an event back with slide information or where the render happens?

I've seen a few posts floating around that say to play with some CSS or force a re-paint etc. for Safari.

[a.og...@entouch.co.jp]

*where in the codebase is the svg path sent to the foreignObject? 

[Chad Pilkey]

The code for the presentation area lives here, https://github.com/bigbluebutton/bigbluebutton/tree/v2.0.x-release/bigbluebutton-html5/imports/ui/components/presentation. The slide is rendered here, https://github.com/bigbluebutton/bigbluebutton/blob/v2.0.x-release/bigbluebutton-html5/imports/ui/components/presentation/component.jsx#L188-L192. And the Slide component referenced is this one, https://github.com/bigbluebutton/bigbluebutton/blob/v2.0.x-release/bigbluebutton-html5/imports/ui/components/presentation/slide/component.jsx.

[a.og...@entouch.co.jp]

Sure enough it is a Safari render issue, it's a combination of clip-path causing clipping with layered svg images and no triggered paint in shadow dom.

I temporarily solved this by setting timeout tranzlateZ(0) on the parent SVG element of clip-path to force a re-paint by the GPU.

I think its related to this https://stackoverflow.com/a/41860519

Is clip path really required?

[Chad Pilkey]

Nice find. I think we use the clip-path for the panning and zooming, but I'm not 100% sure. I'm going to forward this along to the HTML5 developers and let them dig in further.

[Anton Georgiev]

Created an issue for this: 

https://github.com/bigbluebutton/bigbluebutton/issues/6153

Thank you for reporting and also for investigating deeper!

Best regards,

Anton Georgiev

--
You received this message because you are subscribed to the Google Groups "BigBlueButton-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bigbluebutton-...@googlegroups.com.
To post to this group, send email to bigblueb...@googlegroups.com.
Visit this group at https://groups.google.com/group/bigbluebutton-dev.
For more options, visit https://groups.google.com/d/optout.