Opened 13 years ago

Closed 12 years ago

Last modified 10 years ago

#1806 closed defect (fixed)

Problem with dojo layouts with Safari and FF

Reported by: guest Owned by: koranteng
Priority: high Milestone: 0.9
Component: Dijit Version: 0.4
Keywords: Cc: joose@…
Blocked By: Blocking:

Description

Problem 1: Crashes Safari

Description: just surf with safari with that content and it will crash. Does not affect webkit nightly

Problem 2: Layout is broken

Description: Changing size in FF, Safari, Opera will make scrollbars to appear and layout to go crazy.. More you change size of browser, more it's not ok.. Most of the time layout is not correct after the page is parsed.

Problem 3: Totally broken in latest revision

I tested this problem with about 2-3months old revision and todays revision from trunk.

<html>
<head>
<title>Tab+SplitContainer test</title>
</head>
<script type="text/javascript" src="trunk/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.TabContainer");
dojo.require("dojo.widget.SplitContainer");
</script>
<style>
html, body { width: 100%; height: 100%; }
</style>
<body>
<div dojoType="SplitContainer" style="width: 100%; height: 100%;">
 <div dojoType="ContentPane">con 1</div>
 <div dojoType="LayoutContainer">
  <div dojoType="TabContainer" layoutAlign="client">
   <div dojoType="ContentPane" label="tab1">Tab 1</div>
   <div dojoType="SplitContainer" label="tab 2">
    <div dojoType="ContentPane">Split 1</div>
    <div dojoType="ContentPane">Split 2</div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Test code also in http://joose.iki.fi/dojo/test-tabs5.html (older revision) Test code also in http://joose.iki.fi/dojo/test-tabs6.html (latest revision)

Change History (9)

comment:1 Changed 13 years ago by joose@…

Found & fixed problem #3 (broken from revision 6390. Simple fix here it is:

SplitContainer.js:
-       postMixInProperties: function(){
-               this.isHorizontal = (this.orientation == 'horizontal');
-       },

        fillInTemplate: function(){
....
                this.paneWidth = content.width;
                this.paneHeight = content.height;
+               this.isHorizontal = (this.orientation == 'horizontal');

So, remove PostMixProperties? and move the line "this.isHorizontal = (this.orientation == 'horizontal');" to postCreate();

comment:2 Changed 13 years ago by bill

For #3 root cause is probably that postMixInProperties() wasn't calling the superclass. I'll test that and check it in soon.

comment:3 Changed 13 years ago by bill

I added some missing postMixInProperties calls, so issue #3 is fixed, but the test code above still crashes Safari.

comment:4 Changed 13 years ago by Douglas Hays

The problem is that TabContainer?.onResized() calls dojo.widget.html.layout() which calls TabContainer?.onResized(), and so forth. I put a lame busy flag inside onResized and the problem went away, but I doubt that's the right way to fix this.

comment:5 Changed 13 years ago by bill

I didn't detect any infinite recursion; here's what I saw. This testcase has deeply nested widgets: SplitContainer? --> LayoutContainer? --> TabContainer? --> ContentPane?

  1. when the TabContainer? is initialized, it queries it's own size, then sizes the ContentPane? accordingly. But there is no size specified for the TabContainer?, so it's essentially a random size.
  1. when the LayoutContainer? is initialized, it queries it's own size, then sizes the TabContainer? accordingly, which in turn sizes the ContentPane?. But there is no size specified for the LayoutContainer? either.
  1. when the SplitContainer? is initialized, it queries it's own size, then sizes the LayoutContainer?, which in turn sizes the TabContainer?, which in turn sizes the ContentPane?.

All this resizing is just too much for Safari to handle, and it crashes.

It would be good if no widgets did any sizing until the top widget was instantiated. Except for widgets created programatically, or downloaded into a ContentPane? via href attribute, etc. Hmm, not sure what to do here.

comment:6 Changed 13 years ago by bill

Milestone: 0.4.10.5

I'm gonna punt this to 0.5 (at least). I think we could workaround the safari bugs by redesigning widget instantiation to be more efficient, maybe being top down instead of bottom up, but that's much too major a change for 0.4.1.

Actually, even saying "top-down" is a vast oversimplification. Let's look at an example in pseudo-code:

<LayoutContainer style="width:500px; height:500px">
  <DatePicker layoutAlign=top/>
  <ContentPane layoutAlign=client/>
</LayoutContainer>

In this case, the efficient instantiation of these objects is:

  1. create DatePicker?
  2. create LayoutContainer?
  3. LayoutContainer? queries it's own size plus DatePicker?'s size
  4. LayoutContainer? gives remaining space to ContentPane?
  5. create ContentPane?

comment:7 Changed 13 years ago by guest

Here's another example that crashes Safari Version 2.0.4 (419.3) - Wish I had time to investigate it more but I think that would piss off my boss. Maybe it'll shed some light on something.

<html>
<head>
<script type="text/javascript">
	var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LinkPane");
	dojo.hostenv.writeIncludes();
</script>
</head>
<body>
<div id="mainTabContainer" dojoType="TabContainer" style="width:100%; height:100%">
	<div id="tabTest1" dojoType="ContentPane" label="Test">
		<div style="float:right;padding:10px">
		</div>	
	</div>
	<a dojoType="LinkPane" href="" id="tabTest2">Test2</a>
</div>
</body>
</html>

comment:8 Changed 12 years ago by bill

Component: WidgetsDijit
Owner: changed from bill to koranteng

Not supporting Safari 2.0.4, but worth checking to make sure this works on Webkit and on FF2.0.

comment:9 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

(In [9483]) Fix sizing problems on safari/webkit. Also added some debugging code (commented out) to themeTester.html. Fixes #1806, #3624.

Note: See TracTickets for help on using tickets.