Creating a subtheme - feel free to jump in [#1966082]

Starting to build a subtheme - read the reply below for info.

** issue below has been addressed **

I'm creating a site that has the main content region's height set to 100%.

To try and pull this off, I've essentially done the following:

html, body { height: 100%; }
#page-wrapper, #page { min-height: 100%; height: 100%; }
#content-wrapper, #content-wrapper * { min-height: 100%; height: 100%; }

and in the view I am attempting to have display at 100% height:

.pianoBar * { min-height: 0px !important; height: auto !important; }
/* Where pianoBar = views-row */

Everything works fine, except in Chrome. In Chrome, the css transitions are sluggish, the site takes a while to load, etc. While in Opera, Firefox, IE, Safari, the site performs perfectly.

If I remove the styling above, in effect set .pianoBar's height to auto, the site works fine in chrome.

View the site here.

I've also attached the subtheme. Any help is greatly appreciated.

Comment	File	Size	Author
	at_realbridge.zip	115.31 KB	ydahi

Comments

Comment #1

ydahi

Waterloo, Canada

commented 13 April 2013 at 03:14

Title:

Need some help figuring out why 100% height slows down chrome

» Creating a subtheme - feel free to jump in

After hacking away at the tpl I realized the issue was due to the cascading height and min-height settings.

#content-wrapper, #content-wrapper * { min-height: 100%; height: 100%; }

I'm still not exactly sure why only chrome was having a difficult time with it, but after reworking the tpl everything seems fine.

At any rate, I'd like to open up the subtheme build for anyone who'd like to join in. My intent is to build a subtheme that mirrors the design and UX of this site: http://minimalmonkey.com/. This is more of learning experience for me so don't expect any miracles.

I've created a repo on github if you are interested

https://github.com/ymdahi/minimalmonkey-drupal