Animation Rendering Tutorial- Css Animation Triggers Text rendering Chang nIn Chorme & Safari [w/ subs]



00:00:00 – hi I'm Josh world development language
00:00:03 – and I want to share that an interesting
00:00:05 – but we found in in WebKit recently so
00:00:09 – this is our one of our event pages and
00:00:12 – you can look at least tracking 10
00:00:13 – buttons here so if I decided yet i wanna
00:00:14 – go to this conference I i would click on
00:00:17 – that as you can see there's like a
00:00:19 – little spinner appears and then and the
00:00:21 – button changes we know is this thing
00:00:22 – happening on the the rest of the page
00:00:24 – the text rendering is is completely
00:00:26 – changing you see the the anti-aliasing
00:00:28 – is around here and in some other
00:00:30 – artifacts like this this line down here
00:00:32 – it comes the changes position some
00:00:35 – padding as changing around it
00:00:37 – this is chrome the normal release
00:00:42 – version it happens as far as well as
00:00:44 – this is obviously a WebKit issue rather
00:00:46 – than there something you need to come
00:00:47 – going to Chrome Canary this is the same
00:00:51 – page in Chrome Canary click there
00:00:53 – the issue is this kind of the same but
00:00:57 – not as not as much know the
00:01:00 – anti-aliasing is not is not changing the
00:01:01 – same way we still get the issue where
00:01:03 – this line is is pumping up and down in
00:01:05 – fact you can see in some places the text
00:01:08 – colors are changing this effect is much
00:01:10 – more pronounced and I've got this hooked
00:01:12 – up to a monitor i got a second one that
00:01:14 – I use at my desk and I've got that color
00:01:17 – calibrated so the clothes look more on
00:01:19 – my laptop and it's almost like when i
00:01:20 – press this button some of the colors on
00:01:23 – the page are reverting to before the
00:01:25 – color correction is very old
00:01:27 – so what's triggering this bug let's go
00:01:30 – back into the normal chrome it's because
00:01:32 – in here this spinner that appears this
00:01:34 – spinner is an SVG element that were
00:01:37 – rotating around using CSS animation
00:01:39 – what groans doing when you ask you to do
00:01:41 – the CSS animations it's going to convert
00:01:42 – that SVG elements into a bitmap it
00:01:46 – uploads it to the graphics card and then
00:01:49 – it does the animation on the graphics
00:01:50 – card and that's why you get really nice
00:01:51 – performance
00:01:52 – unfortunately doing that thing on the
00:01:54 – GPU it's actually start sending more of
00:01:57 – the page the GPU we can see in the dev
00:01:59 – tools if I talk to show paint rectangles
00:02:01 – and if i click on here you can see those
00:02:04 – rectangles around all the bits of text
00:02:06 – its rear ndering a lot of the page and
00:02:09 – that's not it shouldn't be doing that is
00:02:10 – not what we wanted to do it should just
00:02:12 – be changing that
00:02:13 – tiny bit of the page there so the fixes
00:02:18 – is really interesting so if we go to the
00:02:20 – element the button you see there i'm
00:02:23 – going to go up to one of the common
00:02:25 – elements of both of those but since you
00:02:27 – got to this Dave here with class
00:02:29 – secondary now if i make that element
00:02:33 – position relative expand like correctly
00:02:40 – then what happened here is we still get
00:02:43 – a bug you can see the text is still
00:02:45 – still changing but if i were to pad onto
00:02:48 – that set index on and that's it fixed
00:02:54 – and i'll just make it wider so you can
00:02:57 – see the animation still happening but
00:03:01 – non-sexist changing so what's the reason
00:03:03 – for this why don't know for sure by
00:03:05 – issue when that doesn't have the set
00:03:07 – index it makes it possible for any of
00:03:10 – this text on the page to appear above
00:03:11 – those buttons probably because they have
00:03:13 – position relative and and their lower in
00:03:16 – the HTML order meaning that text could
00:03:18 – appear on top of that bone and that
00:03:20 – means that the energy used in the
00:03:23 – animation it needs to lay that over the
00:03:25 – top that means anything else that can
00:03:27 – layer of the top need to be on the GPU
00:03:28 – as well and sub-pixel rendering which is
00:03:31 – the stuff you see where that you can see
00:03:34 – the fringing on the text has got
00:03:35 – slightly different colors because it's
00:03:36 – making use of the red-green-blue on a
00:03:39 – monitor it can't do that so it falls
00:03:41 – back down to standard anti-aliasing and
00:03:44 – that's the switch that you're seeing as
00:03:46 – for the bits where these lines moving
00:03:47 – and I'm not so sure why that's happening
00:03:50 – but they got theirs to fix put something
00:03:52 – on the site index on one of the parent
00:03:54 – element of your animation to make sure
00:03:56 – that that's always going to appear on
00:03:57 – the top that way and related text on the
00:04:00 – page doesn't need to change


Video Url:
http://youtu.be/RM0EBJR-f8U

(Visited 3 times, 3 visits today)

Comments

comments