IE11, slides not centered

[wmaurer]

The default yeoman generator for bespoke uses bespoke-scale.

bespoke-scale uses 'zoom' by default, with the option to change to 'transform'.
Under IE11, using zoom, the slides are not centered:

Using 'transform', fixes the problem under IE11, but the transform option causes the text to be blurry under Chrome (Windows):

[markdalgleish]

This plugin detects support for the zoom CSS property to decide whether to use zoom or transform scaling.

It seems like IE supports zoom, but not in the same way as Chrome and Safari.

We might need to do some extra work to detect whether we have a workable implementation of zoom, perhaps by programmatically detecting the issue you've highlighted.

[wmaurer]

I have the feeling that maybe focusing on zoom might be the wrong direction. Maybe focusing on fixing the transform for Chrome would be time better spent?

I was under the impression that zoom was originally an old IE feature (that Chrome seems to have picked up), and that CSS Transform should be the future strategy.
http://css-tricks.com/almanac/properties/z/zoom/

Do you also see the same blurry effect with Chrome on Mac?

[markdalgleish]

Yeah, I get blurry text in Chrome on Mac too. This is the main reason for using zoom if it's available. Zooming in on an element with scale transforms causes a loss of quality, particularly for text, whereas zoom keeps things nice and sharp.

Could you see if you can get the layout to work in IE11 while still using the zoom property?

If not, would you be able to write a small snippet of code to detect IE11's zoom implementation, i.e. something that returns true for Chrome but false for IE without UA sniffing.

[mojavelinux]

Could you see if you can get the layout to work in IE11 while still using the zoom property?

I tried and I can't figure out how to do it in a portable way. The problem is compounded by the fact that the zoom in IE works different between IE10 and IE11 (the zoom origin is different).

Since the blurry object / text problem is specific to WebKit, I think we should simply detect for WebKit and use zoom if that's the case and transform otherwise. I'll prepare a patch.

[mojavelinux]

I'll also mention that Opera 12 recognizes the zoom property, but uses it for a completely different purpose. Bespoke.js works in Opera 12 if the zoom property is avoided.