skelPanels - Screen Flicker on Zoom in/out on iOS

[jmalatia]

I've seen some references to screen flickering bugs on iOS in the commit notes as well as in the issues section. But I'm still seeing the flickering when a reference to skel-panels is included on the page (even if skel-panels aren't visible at that breakpoint or even set to go off).

Viewing the examples page at:
http://skeljs.org/uploads/examples/panels-example/index.html

I'm seeing the flickering using an iPad (iOS 6) when I zoom in.... screen flashes. Same issue on iPhone with iOS6 and lockViewport=false

I've reproduced using v0.4.0 and v.0.4.1.

Any thoughts?

[ajlkn]

What iPad and iPhone are you using?

On 10/12/2013 1:26 PM, jmalatia wrote:

I've seen some references to screen flickering bugs on iOS in the
commit notes as well as in the issues section. But I'm still seeing
the flickering when a reference to skel-panels is included on the
page (even if skel-panels aren't visible at that breakpoint or even
set to go off).

Viewing the examples page at:
http://skeljs.org/uploads/examples/panels-example/index.html

I'm seeing the flickering using an iPad (iOS 6) when I zoom in....
screen flashes. Same issue on iPhone with iOS6 and
lockViewport=false

I've reproduced using v0.4.0 and v.0.4.1.

Any thoughts?

--- Reply to this email directly or view it on GitHub:
#12

[jmalatia]

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

[ajlkn]

Same deal with the stuff at html5up.net? eg.

http://html5up.net/uploads/demos/striped/

On 10/12/2013 1:44 PM, jmalatia wrote:

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

---

Reply to this email directly or view it on GitHub:
#12 (comment)

[jmalatia]

Yes....
http://html5up.net/uploads/demos/striped/
Flickers as well.

More info: It looks like it flashes once when done zooming... almost
like the solid background is popping in front for a second and then the
text shows back again... but it happens with a page with elements that
have no background set as well. Also at times (maybe 1 out of 20 times)
when it flashes, the text never pops back up and the screen is blank and
will only appear if you touch the screen again (usually when you are
zoomed in tight).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
Date: 10/12/2013 1:48 PM

Same deal with the stuff at html5up.net? eg.

http://html5up.net/uploads/demos/striped/

On 10/12/2013 1:44 PM, jmalatia wrote:

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

[ajlkn]

But if you don't zoom there's no flickering?

On 10/12/2013 1:55 PM, jmalatia wrote:

Yes....
http://html5up.net/uploads/demos/striped/
Flickers as well.

More info: It looks like it flashes once when done zooming... almost
like the solid background is popping in front for a second and then the
text shows back again... but it happens with a page with elements that
have no background set as well. Also at times (maybe 1 out of 20 times)
when it flashes, the text never pops back up and the screen is blank and
will only appear if you touch the screen again (usually when you are
zoomed in tight).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:48 PM

Same deal with the stuff at html5up.net? eg.

http://html5up.net/uploads/demos/striped/

On 10/12/2013 1:44 PM, jmalatia wrote:

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

[jmalatia]

correct... no flicker unless you zoom.
Scrolling a page looks fine.

flicker occurs a soon as you release your fingers from a zoom (in or
out)... then it is fine until you zoom again...

additional info: using the panels (left side panel slide in/out,
right-side panel slide-in/out) all look and work great with no
flickering... in addition, other jquery hover/click show/hide elements
work fine with no flicker (unless you zoom).

[ajlkn]

The zooming combined with the CSS transforms used by Panels might be
causing Safari/iOS to freak out. Try adding:

useTransform: false

to your panels config (at the depth as "panels" and "overlays") and see
if that affects it.

On 10/12/2013 2:04 PM, jmalatia wrote:

correct... no flicker unless you zoom.
Scrolling a page looks fine.

flicker occurs a soon as you release your fingers from a zoom (in or
out)... then it is fine until you zoom again...

additional info: using the panels (left side panel slide in/out,
right-side panel slide-in/out) all look and work great with no
flickering... in addition, other jquery hover/click show/hide elements
work fine with no flicker (unless you zoom).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:57 PM

But if you don't zoom there's no flickering?

On 10/12/2013 1:55 PM, jmalatia wrote:

Yes....
http://html5up.net/uploads/demos/striped/
Flickers as well.

More info: It looks like it flashes once when done zooming... almost
like the solid background is popping in front for a second and then the
text shows back again... but it happens with a page with elements that
have no background set as well. Also at times (maybe 1 out of 20 times)
when it flashes, the text never pops back up and the screen is blank and
will only appear if you touch the screen again (usually when you are
zoomed in tight).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:48 PM

Same deal with the stuff at html5up.net? eg.

http://html5up.net/uploads/demos/striped/

On 10/12/2013 1:44 PM, jmalatia wrote:

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

[jmalatia]

That seemed to take care of the flickering.... Instead though I used:

transformBreakpoints: 'mobile'

as I'm only using panels in mobile view. Am I correct in this usage?

I assume panels.js initializes the panels framework even if no panels
are configured as like I said, even if you don't setup any panels or
overlays and include a ref to skel-panels.js the flickering occurs. For
instance if you take your standard skeljs example page with no panels
and then just add a ref to the page of:

<script src="skel-panels.min.js"></script>

And not setup any panels, the flickering on zoom will occur.

Thanks!

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 2:14 PM

The zooming combined with the CSS transforms used by Panels might be
causing Safari/iOS to freak out. Try adding:

useTransform: false

to your panels config (at the depth as "panels" and "overlays") and see
if that affects it.

On 10/12/2013 2:04 PM, jmalatia wrote:

correct... no flicker unless you zoom.
Scrolling a page looks fine.

flicker occurs a soon as you release your fingers from a zoom (in or
out)... then it is fine until you zoom again...

additional info: using the panels (left side panel slide in/out,
right-side panel slide-in/out) all look and work great with no
flickering... in addition, other jquery hover/click show/hide elements
work fine with no flicker (unless you zoom).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:57 PM

But if you don't zoom there's no flickering?

On 10/12/2013 1:55 PM, jmalatia wrote:

Yes....
http://html5up.net/uploads/demos/striped/
Flickers as well.

More info: It looks like it flashes once when done zooming... almost
like the solid background is popping in front for a second and
then the
text shows back again... but it happens with a page with elements that
have no background set as well. Also at times (maybe 1 out of 20
times)
when it flashes, the text never pops back up and the screen is
blank and
will only appear if you touch the screen again (usually when you are
zoomed in tight).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out
on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:48 PM

Same deal with the stuff at html5up.net? eg.

http://html5up.net/uploads/demos/striped/

On 10/12/2013 1:44 PM, jmalatia wrote:

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

[ajlkn]

Yeah. It's probably the combination of zooming + CSS transforms (which
are used as soon as Panels is initialized). Unfortunately I don't know
if there's a way around this; transforms introduce a whole new set of
viewport rules that might be conflicting with the zoom stuff.

That being said, while transformBreakpoints certainly works, using
lockViewport to disable user zooming might be the better way to go. That
way you keep the speed benefits of transforms and the flicker issue
won't come up. You'll obviously lose user zooming, but I'd argue a
properly optimized phone/tablet site shouldn't need it.

On 10/13/2013 11:16 AM, jmalatia wrote:

That seemed to take care of the flickering.... Instead though I used:

transformBreakpoints: 'mobile'

as I'm only using panels in mobile view. Am I correct in this usage?

I assume panels.js initializes the panels framework even if no panels
are configured as like I said, even if you don't setup any panels or
overlays and include a ref to skel-panels.js the flickering occurs. For
instance if you take your standard skeljs example page with no panels
and then just add a ref to the page of:

<script src="skel-panels.min.js"></script>

And not setup any panels, the flickering on zoom will occur.

Thanks!

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 2:14 PM

The zooming combined with the CSS transforms used by Panels might be
causing Safari/iOS to freak out. Try adding:

useTransform: false

to your panels config (at the depth as "panels" and "overlays") and see
if that affects it.

On 10/12/2013 2:04 PM, jmalatia wrote:

correct... no flicker unless you zoom.
Scrolling a page looks fine.

flicker occurs a soon as you release your fingers from a zoom (in or
out)... then it is fine until you zoom again...

additional info: using the panels (left side panel slide in/out,
right-side panel slide-in/out) all look and work great with no
flickering... in addition, other jquery hover/click show/hide elements
work fine with no flicker (unless you zoom).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:57 PM

But if you don't zoom there's no flickering?

On 10/12/2013 1:55 PM, jmalatia wrote:

Yes....
http://html5up.net/uploads/demos/striped/
Flickers as well.

More info: It looks like it flashes once when done zooming... almost
like the solid background is popping in front for a second and
then the
text shows back again... but it happens with a page with elements that
have no background set as well. Also at times (maybe 1 out of 20
times)
when it flashes, the text never pops back up and the screen is
blank and
will only appear if you touch the screen again (usually when you are
zoomed in tight).

-------- Original Message --------
Subject: Re: [skelJS] skelPanels - Screen Flicker on Zoom in/out
on iOS
(#12)
From: aj notifications@github.com
To: n33/skelJS skelJS@noreply.github.com
Cc: jmalatia jason@thebroadcastshop.com
Date: 10/12/2013 1:48 PM

Same deal with the stuff at html5up.net? eg.

http://html5up.net/uploads/demos/striped/

On 10/12/2013 1:44 PM, jmalatia wrote:

iPad 4th Gen (Retina) - iOS 6.1.3
iPhone 4s - iOS 6.1.3
Flicker happens on both Safari & Chrome on those units.

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)

—
Reply to this email directly or view it on GitHub
#12 (comment).

---

Reply to this email directly or view it on GitHub:
#12 (comment)