search

paulrouget / dzslides

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.
http://paulrouget.com/dzslides
934 stars 255 forks source link

Text pixilation using scale? #89

Closed jonkeane closed 12 years ago

jonkeane commented 12 years ago

I've run into a very strange bug, which might actually just be a webkit thing.

When I embed a video whenever there is scaling on text which should be smooth, the text is pixelated at ratios over 1.0. It appears that if the video is a link, it only changes the presentation after the movie has been seen. This can be observed in the template at a relatively large size, go to the video, let it load, and then go to any other slide (before or after) and note the text pixelation.

I've tried chrome, safari, and firefox on os x lion. It happens in chrome. I tried safari, but it can't play webm (in a file I generated myself with a different codec I saw the same behavior), but it appears to not happen in firefox.

Has anyone found a work around for this?

hsablonniere commented 12 years ago

I tried what you've just explained on Linux/ubuntu (chrome, FF, opera) and I couldn't reproduce the bug. Could you publish screenshots from chrome and FF to have an idea ?

jonkeane commented 12 years ago

Sure, here are a number of screen shots:

Firefox before 0 Firefox before 1

Firefox after 0 Firefox after 1

Chrome before 0 Chrome before 1

Chrome after 0 Chrome after 1

For this type face the result is subtle, although if you zoom in, and compare the before and after for chrome, it's noticeable. It's especially bad with other typefaces here is an example of something I'm currently working on in firefox and chrome.

hsablonniere commented 12 years ago

I would go for a webkit bug but I can't be sure. I just did a quick search. Can you tell me if this bug is similar ?

https://bugs.webkit.org/show_bug.cgi?id=73316 Live test case here : http://jsbin.com/ixewed

jonkeane commented 12 years ago

The jsbin does look a bit similar: to me the text does look blurry when the black rectangle is scaled, although I can't get the following part to work: "However, in 4 seconds the z-index of the black div changes and the black div becomes to be over the red div. Boom! Here the text becomes blurry (which is a big problem)." in either safari or chrome. So I can't tell if it's the exact same issue.

I figured it was a webkit bug. I mostly only posted it here because this was the first time I ran into it, and spent a while trying to figure out what was going on with my slides before I found the minimal difference (video rendered, or not), and if others run into the same problem at least the workaround of use firefox is here (the workaround even has the unintended consequence of better (existant?) ligature support in firefox, which I am quite happy about.).

hsablonniere commented 12 years ago

Ok, sorry I couldn't help more. Can I close the issue?

jonkeane commented 12 years ago

Sorry, meant to do that when I posted the last comment.

hsablonniere commented 12 years ago

NP. Hope DZSlide will help your work anyway...