Basic IE9+ support #733

Closed
wants to merge 2 commits into
from

Conversation

Projects
None yet
6 participants

graefen commented Mar 27, 2013

Here's what I've done to implement basic IE9+ support in Zepto. I haven't tested all the modules, but I've been using this for a few months and haven't seen any issues with basic functions in IE9+ (functions like element selection and manipulation, event binding, and basic XHR use).

@danyaPostfactum danyaPostfactum commented on the diff Mar 27, 2013

src/zepto.js
@@ -667,7 +668,7 @@ var Zepto = (function() {
},
scrollTop: function(){
if (!this.length) return
- return ('scrollTop' in this[0]) ? this[0].scrollTop : this[0].scrollY
+ return ('scrollTop' in this[0]) ? this[0].scrollTop : ('scrollY' in this[0] ? this[0].scrollY : this[0].pageYOffset)
@danyaPostfactum

danyaPostfactum Mar 27, 2013

Why not just pageYoffset without testing scrollY ? Both properties are described in CSSOM spec.

@graefen

graefen Mar 27, 2013

Since scrollTop previously supported scrollY, I saw no reason to eliminate that support.

@danyaPostfactum danyaPostfactum commented on the diff Mar 27, 2013

src/zepto.js
@@ -133,7 +133,8 @@ var Zepto = (function() {
// Explorer. This method can be overriden in plugins.
zepto.Z = function(dom, selector) {
dom = dom || []
- dom.__proto__ = $.fn
+ if (dom.__proto__) dom.__proto__ = $.fn
+ else extend(dom.constructor.prototype, $.fn, true)
@danyaPostfactum

danyaPostfactum Mar 27, 2013

You are extending Array.prototype. It is not suitable.

@graefen

graefen Mar 27, 2013

Well, it works...perhaps there's a better way to modify the zepto.Z function for IE (I haven't exhaustively explored this), but I just wanted to get it working :)

@danyaPostfactum danyaPostfactum commented on the diff Mar 27, 2013

src/zepto.js
@@ -24,7 +24,7 @@ var Zepto = (function() {
'td': tableRow, 'th': tableRow,
'*': document.createElement('div')
},
- readyRE = /complete|loaded|interactive/,
+ readyRE = /complete/,
@danyaPostfactum

danyaPostfactum Mar 27, 2013

Can you explain please (in two words) this change?

@graefen

graefen Mar 27, 2013

It's been a few months since I made that change, but my memory is that in IE either the 'loaded' or 'interactive' value of document.readyState was premature. When passing a function to execute upon DOMready — e.g. $(function() { }) — it was executing prematurely before the document was actually ready.

niveus commented Mar 28, 2013

I know this ticket was about IE9 support, but I was able to get IE 10 support through a rather simple plugin. It seems to work fine for me on my website.

ie.js

;(function($) {
  if('__proto__' in {}) return;

  $.extend($.zepto, {
    Z: function(dom, selector) {
        dom = dom || []
        $.extend(dom, $.fn)
        dom.selector = selector || ''
        return dom
    }
  })
})(Zepto)

@madrobby madrobby added a commit that referenced this pull request Sep 14, 2013

@madrobby madrobby Use Object.getPrototypeOf instead of __proto__ in isPlainObject (#654,
…#729, #733)

* Fixes compatibility with Internet Explorer
* Same speed or faster on all target platforms (see http://jsperf.com/proto-vs-getprototypeof-2)
2415cda

wkeese referenced this pull request in ibm-js/delite Oct 27, 2013

Closed

jquery #41

Owner

madrobby commented Nov 24, 2013

We have added experimental support for IE 10/11. I don't think we want to support IE 9 at all with Zepto, so I'm closing this. Thanks for your efforts—perhaps you can supply a plugin in a separate repository. If you need to make changes to Zepto core to enable that, we can definitely accommodate you.

madrobby closed this Nov 24, 2013

Update: see #916

@Totktonada Totktonada added a commit to Totktonada/zepto that referenced this pull request Oct 30, 2016

@Totktonada Totktonada More reliable way to examine DOM readiness on IE
This commit is revisiting of the following commit.

commit 790d6c2
Author: sgtwilko <null@sgtwilko.f9.co.uk>
Date:   Wed Oct 2 10:47:09 2013 +0100

    Ready fires on IE10 before the document is ready.

    Added additional check for document.body into the ready check.
    Changing the readyRE regex does resolve the issue on IE, but breaks
    Chrome.  Adding this check fixes IE and doesn't seem to have any
    problems on Chrome/Firefox.

More info about the original problem with IE can be found in related
jQuery tracker [1].

This commit solves the particular case when IE <= 10 gives non-null
`document.body` in "interactive" `document.readyState`, but DOM isn't
fully parsed at the moment. The case was catched in [2]. This commit
adapt current jQuery's approach to detect IE9 & IE 10, see [3].

Related zepto trackers: #733, #916.

[1]: https://bugs.jquery.com/ticket/12282
[2]: https://bugs.jquery.com/ticket/12282#comment:20
[3]: jquery/jquery#2678

Build size
----------

Calculated for a build with the default modules set:

```
zepto.js      58760 -> 58726 ( +6 bytes)
zepto.min.js  26411 -> 26427 (+16 bytes)
zepto.min.gz   9804 ->  9799 ( -5 bytes)
```
24274f5
Contributor

Totktonada commented Nov 1, 2016

Fortunately IE10 is bad enough and now all parts of this PR seems to be included in the master. I cannot check IE9 right now, but it’s possible that IE9 now supported too.

@Totktonada Totktonada added a commit to whatifrussian/website that referenced this pull request Nov 1, 2016

@Totktonada Totktonada Replace jQuery with Zepto
[Zepto][1] is lightweight jQuery replacement.

This build of Zepto was built using [Zepto Builder][2] with zepto,
event, ajax, ie, fx modules (default - form + fx). Uglifyied.

Now it lacks of support IE 9, but it can be enabled by manual rebuilding
with [3].

Zepto's `animate()` doesn't support jQuery-like queues (see [4]), so
step by step animation will not work w/o some rewriting. Possible
solution: [5].

[1]: http://zeptojs.com/
[2]: http://github.e-sites.nl/zeptobuilder/
[3]: madrobby/zepto#733
[4]: madrobby/zepto#711
[5]: http://stackoverflow.com/a/17246878
41a427c

@Totktonada Totktonada added a commit to whatifrussian/website that referenced this pull request Nov 1, 2016

@Totktonada Totktonada Updated Zepto to support IE9 and queued animations
This commit updates Zepto to current master, which now includes
[PR #1235][1], and applys [PR #1237] at top of it.

The first PR contains fixes for `ready` function, especially for IE9 &
IE10 (but not only). The second PR allows animations to wait each other
when its applied to the same element.

In this state Zepto seems to fit our needs, but it worth to check IE9
explicitly. Maybe some updates on IE9 will be [here][3].

Until the second PR not merged into Zepto master I'll hold this state of
Zepto [here][4].

The modules set don't changed: "zepto event ajax ie fx".

[1]: madrobby/zepto#1235
[2]: madrobby/zepto#1237
[3]: madrobby/zepto#733
[4]: https://github.com/Totktonada/zepto/tree/release/whatifrussian

JS bundle size
--------------

Compared c7c4ee0 with this commit.

jQuery 2.1.0 -> Zepto (1.2.0 + patches):

packed.js     99152 -> 43479 (-55673 bytes, -56.15%)
packed.js.gz  34383 -> 15455 (-18928 bytes, -55.05%)
074fa41
Contributor

Totktonada commented Nov 17, 2016

I tested IE9 & IE10 and have some info on the topic:

  • #1240. Not sure whether it affected IE9, but maybe it can.
  • #1237. Animation queue doesn’t work on IE9.

@jansesun jansesun added a commit to jansesun/zepto that referenced this pull request Jun 23, 2017

@Totktonada @jansesun Totktonada + jansesun More reliable way to examine DOM readiness on IE
This commit is revisiting of the following commit.

commit 790d6c2
Author: sgtwilko <null@sgtwilko.f9.co.uk>
Date:   Wed Oct 2 10:47:09 2013 +0100

    Ready fires on IE10 before the document is ready.

    Added additional check for document.body into the ready check.
    Changing the readyRE regex does resolve the issue on IE, but breaks
    Chrome.  Adding this check fixes IE and doesn't seem to have any
    problems on Chrome/Firefox.

More info about the original problem with IE can be found in related
jQuery tracker [1].

This commit solves the particular case when IE <= 10 gives non-null
`document.body` in "interactive" `document.readyState`, but DOM isn't
fully parsed at the moment. The case was catched in [2]. This commit
adapt current jQuery's approach to detect IE9 & IE 10, see [3].

Related zepto trackers: #733, #916.

[1]: https://bugs.jquery.com/ticket/12282
[2]: https://bugs.jquery.com/ticket/12282#comment:20
[3]: jquery/jquery#2678

Build size
----------

Calculated for a build with the default modules set:

```
zepto.js      58760 -> 58726 ( +6 bytes)
zepto.min.js  26411 -> 26427 (+16 bytes)
zepto.min.gz   9804 ->  9799 ( -5 bytes)
```
b17f3b2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment