-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IE11, slides not centered #3
Comments
This plugin detects support for the 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. |
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. Do you also see the same blurry effect with Chrome on Mac? |
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. |
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. |
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. |
- only use zoom strategy if browser can be identified as WebKit - fix tests (add classes so that styles take affect)
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):
The text was updated successfully, but these errors were encountered: