Rendering issues in Chrome version 33 and 34 due to overflow style

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Rendering issues in Chrome version 33 and 34 due to overflow style

Jeroen Smit-2

Hi,

 

We are encountering rendering issues in certain Chrome versions when using HTML5 canvas controls (through KineticJC) in our application based on Qx version 3.0.2. The issues all consist of controls (toolbars/windows/tooltips) not being shown (divs available in the DOM but not visible). When removing the part of the application with the HTML5 canvas control the other controls become visible. Looking at the divs in the DOM no properties have changed.

 

I found this even in test applications (not using Qx at al) when adding the overflowX/Y with value “hidden”.

As a test I adjusted the _createContentElement implementation in qx.ui.core.Widget as included below and all issues seem to have disappeared.

 

My question is, are these known issues and is my workaround one that could be embedded in the framework?

 

    _createContentElement : function()

    {

      var browserName = qx.core.Environment.get("browser.name");

      var version = parseFloat(qx.core.Environment.get("browser.version"));

      if (browserName == "chrome" && (version == 33 || version == 34)) {

        return new qx.html.Element("div", {

          overflowX: "",

          overflowY: ""

        });

      }

      else {

        return new qx.html.Element("div", {

          overflowX: "hidden",

          overflowY: "hidden"

        });

      }

    },

 

Best regards,

Jeroen

 

 

 


------------------------------------------------------------------------------
"Accelerate Dev Cycles with Automated Cross-Browser Testing - For FREE
Instantly run your Selenium tests across 300+ browser/OS combos.
Get unparalleled scalability from the best Selenium testing platform available
Simple to use. Nothing to install. Get started now for free."
http://p.sf.net/sfu/SauceLabs
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rendering issues in Chrome version 33 and 34 due to overflow style

Defero
Good catch, we're having the same issue that i couldn't find the cause of.

In our case we had a splitpane, a bunch of tables on the left and an iframe on the right. The iframe was showing a pdf.
Whenever you pushed the splitpane for the left side to be less then 50% the window frame of the iframe, the whole left content in splitpane and the "master" window would dissapear.
Menu and header stayed visible.

I've tryed what you wrote and it stopped this issue. But now everything overflows now.


Gd,
Defero
Reply | Threaded
Open this post in threaded view
|

Re: Rendering issues in Chrome version 33 and 34 due to overflow style

Jeroen Smit-2
Oops that sounds like a nasty "side effect".
I'll see if I have that issue too now

Groeten,
 Jeroen

-----Original Message-----
From: Defero [mailto:[hidden email]]
Sent: woensdag 21 mei 2014 14:47
To: [hidden email]
Subject: Re: [qooxdoo-devel] Rendering issues in Chrome version 33 and 34 due to overflow style

Good catch, we're having the same issue that i couldn't find the cause of.

In our case we had a splitpane, a bunch of tables on the left and an iframe on the right. The iframe was showing a pdf.
Whenever you pushed the splitpane for the left side to be less then 50% the window frame of the iframe, the whole left content in splitpane and the "master" window would dissapear.
Menu and header stayed visible.

I've tryed what you wrote and it stopped this issue. But now everything overflows now.


Gd,
Defero



--
View this message in context: http://qooxdoo.678.n2.nabble.com/Rendering-issues-in-Chrome-version-33-and-34-due-to-overflow-style-tp7585707p7585708.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
"Accelerate Dev Cycles with Automated Cross-Browser Testing - For FREE Instantly run your Selenium tests across 300+ browser/OS combos.
Get unparalleled scalability from the best Selenium testing platform available Simple to use. Nothing to install. Get started now for free."
http://p.sf.net/sfu/SauceLabs
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
"Accelerate Dev Cycles with Automated Cross-Browser Testing - For FREE
Instantly run your Selenium tests across 300+ browser/OS combos.
Get unparalleled scalability from the best Selenium testing platform available
Simple to use. Nothing to install. Get started now for free."
http://p.sf.net/sfu/SauceLabs
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rendering issues in Chrome version 33 and 34 due to overflow style

Phyo Arkar
In reply to this post by Jeroen Smit-2
Seems a big problemn.
Can you open an issue?


On Wed, May 21, 2014 at 5:35 PM, Jeroen Smit <[hidden email]> wrote:

Hi,

 

We are encountering rendering issues in certain Chrome versions when using HTML5 canvas controls (through KineticJC) in our application based on Qx version 3.0.2. The issues all consist of controls (toolbars/windows/tooltips) not being shown (divs available in the DOM but not visible). When removing the part of the application with the HTML5 canvas control the other controls become visible. Looking at the divs in the DOM no properties have changed.

 

I found this even in test applications (not using Qx at al) when adding the overflowX/Y with value “hidden”.

As a test I adjusted the _createContentElement implementation in qx.ui.core.Widget as included below and all issues seem to have disappeared.

 

My question is, are these known issues and is my workaround one that could be embedded in the framework?

 

    _createContentElement : function()

    {

      var browserName = qx.core.Environment.get("browser.name");

      var version = parseFloat(qx.core.Environment.get("browser.version"));

      if (browserName == "chrome" && (version == 33 || version == 34)) {

        return new qx.html.Element("div", {

          overflowX: "",

          overflowY: ""

        });

      }

      else {

        return new qx.html.Element("div", {

          overflowX: "hidden",

          overflowY: "hidden"

        });

      }

    },

 

Best regards,

Jeroen

 

 

 


------------------------------------------------------------------------------
"Accelerate Dev Cycles with Automated Cross-Browser Testing - For FREE
Instantly run your Selenium tests across 300+ browser/OS combos.
Get unparalleled scalability from the best Selenium testing platform available
Simple to use. Nothing to install. Get started now for free."
http://p.sf.net/sfu/SauceLabs
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
HPCC Systems Open Source Big Data Platform from LexisNexis Risk Solutions
Find What Matters Most in Your Big Data with HPCC Systems
Open Source. Fast. Scalable. Simple. Ideal for Dirty Data.
Leverages Graph Analysis for Fast Processing & Easy Data Exploration
http://p.sf.net/sfu/hpccsystems
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rendering issues in Chrome version 33 and 34 due to overflow style

Defero
I'm having problems trying to replicate the issue on the playground.
@Jeroen Smit - do you know how to replicate it?

We have a bunch of computers here and i tested on all of them. Only one has this problems and it has the same version of chrome (35.0.1916.153 m) as the rest of them.

So far, yes there is something wrong with overflow but from my test, chrome version has no influence here.



Gd,

Defero
Reply | Threaded
Open this post in threaded view
|

Re: Rendering issues in Chrome version 33 and 34 due to overflow style

Jeroen Smit-2
Hi,

You mention version 35 which doesn't have the Chrome issue.
When you use a version 33 or 34 or Opera version 21 the overflow issues should become apparent.
On all controls I create in my own code I applied the following method to solve the issues:

  __hideOverflow: function (control) {
      var browserName = qx.core.Environment.get("browser.name");
      var version = parseFloat(qx.core.Environment.get("browser.version"));
      var shouldApplyBrowserHack =
            ((browserName == "chrome" && (version == 33 || version == 34)) || (browserName == "opera" && version == 21));
      var overflowValue = shouldApplyBrowserHack ? null : "hidden";
      if (qx.Class.hasProperty(control.constructor, "overflowX")) {
          control.setOverflowX(overflowValue);
      }
      if (qx.Class.hasProperty(control.constructor, "overflowY")) {
          control.setOverflowY(overflowValue);
      }
  },

I do not have a small example to reproduce but I will try and set one up next week.

Best regards,
 Jeroen

-----Original Message-----
From: Defero [mailto:[hidden email]]
Sent: vrijdag 20 juni 2014 10:34
To: [hidden email]
Subject: Re: [qooxdoo-devel] Rendering issues in Chrome version 33 and 34 due to overflow style

I'm having problems trying to replicate the issue on the playground.
@Jeroen Smit - do you know how to replicate it?

We have a bunch of computers here and i tested on all of them. Only one has this problems and it has the same version of chrome (35.0.1916.153 m) as the rest of them.

So far, yes there is something wrong with overflow but from my test, chrome version has no influence here.



Gd,

Defero



--
View this message in context: http://qooxdoo.678.n2.nabble.com/Rendering-issues-in-Chrome-version-33-and-34-due-to-overflow-style-tp7585707p7585897.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
HPCC Systems Open Source Big Data Platform from LexisNexis Risk Solutions Find What Matters Most in Your Big Data with HPCC Systems Open Source. Fast. Scalable. Simple. Ideal for Dirty Data.
Leverages Graph Analysis for Fast Processing & Easy Data Exploration http://p.sf.net/sfu/hpccsystems _______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
HPCC Systems Open Source Big Data Platform from LexisNexis Risk Solutions
Find What Matters Most in Your Big Data with HPCC Systems
Open Source. Fast. Scalable. Simple. Ideal for Dirty Data.
Leverages Graph Analysis for Fast Processing & Easy Data Exploration
http://p.sf.net/sfu/hpccsystems
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel