We haven't released it yet, but there's a new homepage for our brand that I was building out. It had some fancy parallax effects and stuff. It was weird because on iOS on an iPad - it worked fine on mobile - but on iPad everything was really janky. It turned out after I had chatted with one of the senior engineers from the design firm that was helping us out, that iOS has performance issues when trying to animate an element that has text shadow. Once I removed the text shadow then things were smooth on the iPad again, which was kind of an oddly annoying thing to fix. I just darkened the background of the videos a little bit and then it looked OK. That was something I did not know, I had no idea that text shadow could cause issues like that on an iPad. I had mentioned the issue of rendering video to a canvas. It seems that iOS was a bit more stringent about how much memory a canvas can use. We ran into some flickering issues on a... I think it was an iPad Pro, an older 12-inch iPad Pro. Because it's such a large canvas running at a very high resolution, sometimes the edges would clip as you would scroll. The way we fixed it is we ended up having just two separate canvases drawing the same video, and that stopped the flickering. I guess an individual canvas in iOS is limited to a certain resolution. Yeah, it was an odd thing that I kind of stumbled into.
Safari
Speaking of Safari. Features you wanted but couldn't use?
I was really hoping Safari would support offscreen canvas, but it does not yet. Offscreen canvas in Chrome or Mozilla, you could do your drawing and compositing off-thread and it really bummed me out that we couldn't do that because Safari doesn't support that yet. I just tried to optimize the canvas drawing as much as I could. I basically created a canvas that wasn't attached to the DOM. I would do the drawing calls there, then, once everything was after composited and layered properly, then I would draw it onto the real canvas.
Chrome
Made with FlippingBook - professional solution for displaying marketing and sales documents online