search

bespokejs / bespoke-scale

Responsive Slide Scaling for Bespoke.js
MIT License
8 stars 7 forks source link

IE11, slides not centered #3

Open wmaurer opened 9 years ago

wmaurer commented 9 years ago

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:

bespoke

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

bespoke3

markdalgleish commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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.